为什么AngularJS过滤器在ng-if内部不起作用？

我有一个简单的AngularJS页面,其中包含我展示的不同部分.单击链接时隐藏.其中一个区域有一个可以过滤的重复列表.

当使用ng-show或ng-hide显示/隐藏包含列表的部分时,它的行为正常.使用ng-if时,无法过滤列表.

演示

> This version does not work due to the use of ng-if
> This version does work due to the use of ng-show

示例HTML

<nav>
    <a href="javascript:{}" ng-click="area='one';">Area 1</a>
    <a href="javascript:{}" ng-click="area='two';">Area 2</a>
</nav>

<div ng-if="area==='one'">
    <h3>Area 1!</h3>
    <input type="text" placeholder="filter list..." ng-model="filterText" />
    <ul>
       <li ng-repeat="item in list | filter: listFilter">
           {{item.id}} - {{item.name}}
       </li>
    </ul>
</div>

<div ng-if="area==='two'">
    <h3>Area 2!</h3>
    <p>Stuff here...</p>
</div>

示例角度

$scope.area="one";
$scope.filterText="";

$scope.list = [
    {id:1,name:"banana"},{id:2,name:"apple"},{id:3,name:"orange"},{id:4,name:"pear"},{id:5,name:"apricot"}
];

$scope.listFilter = function(item){
    var term = $scope.filterText.trim().toLowerCase();
    return item.id.toString().indexOf(term) > -1 || item.name.indexOf(term) > -1;
};

我自己没有获得关于原型继承的硕士学位,但我会尽快解释它(这个主题有很多资源);

>数量
>字符串
>布尔值
> null
>未定义
>符号(自ES6起)

被认为是primitives (MDN).

现在 – 当您从父作用域继承’基元时,实际发生的是子作用域“镜像”或“遮蔽”给定的原始值.因此,您可以将其视为上述的副本.

这大致是原型继承语境中原语的本质.

这可以在modified version of your broken fiddle中清楚地观察到.

尝试使用两个输入进行播放,当您只触摸外部输入时(即子值’遮蔽’父值),您可以看到两个值之间存在连接.但是一旦触摸内部输入,值就会相互脱离.

推荐的解决方法是使用对模型上的属性的引用(我说模型,但实际上它只是一个JS对象),它在原型链的进一步定义;

$parentScope.obj = { filterText: '' };

ng-model="obj.filterText"

现在你应该好好使用ngIf,ngSwitch,ngRepeat来命名一些创建新范围的角度提供的指令.

有关该主题的资源

> understanding scopes @ angular
> presentation by misko on the subject
> stackoverflow answer by Mark Rajcok
> the dot @egghead.io
> google search ‘dot ng model’

为什么AngularJS过滤器在ng-if内部不起作用？

相关文章