我有一个简单的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’
