Question

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

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

演示

示例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;
};

Answer 1

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

Number
String
Boolean
null
undefined
Symbol（自ES6起）

被视为primitives (MDN)。

现在 - 当您从父作用域继承'原语时，实际发生的是子作用域“镜像”或“遮蔽”给定的原始值。因此，您可以将其视为上述的副本。

在原型继承的上下文中，大致原语的本质。

这可以在modified version of your broken fiddle中清楚地看到。

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

推荐解决此问题的方法是将引用用于模型上的属性（我说模型，但实际上它只是一个JS对象）进一步定义了原型链;

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

ng-model="obj.filterText"

现在，您最好使用ngIf，ngSwitch，ngRepeat来命名一些创建新范围的角度提供的指令。

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

1 个答案:

有关该主题的资源