解除ng-repeat范围的绑定
[英]Unbinding ng-repeat scope
问题描述
我每个都有两个<tr>和一个ng-repeat，但是它们的子元素都执行相同的操作，如下所示：
<tr ng-repeat="item in data : filterFunc" ng-if="mode === 'something'">
<td>{{item.name}}</td>
</tr>
<tr ng-repeat="item in data : filterFunc" ng-if="mode === 'somethingelse'">
<td>{{item.name}}</td>
</tr>
想象一下，有两种类型的数据集，而将要呈现的是由运行时的mode属性决定的。 因此，第一个<tr>要么在DOM中呈现，要么另一个呈现。 最初，第一个<tr>将被呈现，并且关联的filterFunc函数将正常运行。 有一个简单的下拉菜单，其中有两个选项，两个mode一个。 如果选择其他模式，则将渲染第二个<tr>而第一个<tr>将从DOM中删除。 问题是， filterFunc现在绑定到两个<tr>并且都在两个上运行。 我如何解除对第一个示波器的作用域或观察者的绑定，而仅将其绑定到第二个示波器？ 或在任何时间点中的任何一个？ 这是小提琴http://jsfiddle.net/6kx4ojL4/
注意：为简单起见，我只按filterFunc在filterFunc返回了传入的数据对象。 在浏览器控制台中检查输出。 它被调用两次，即针对两个数据集。
3 个解决方案
解决方案1
1 2014-09-14 11:12:57
根据您的描述，您尚不清楚要执行的操作。 我首先想到的是，您可以将ng-if中的模式分开，例如，使用mode1和mode2，以便可以分别控制两个<tr>。
解决方案2
1 2014-09-14 11:13:36
使用ng-show代替ng-if
<tr ng-repeat="item in data : orderBy: 'name'" ng-show="mode === 'something'">
<td>{{item.name}}</td>
</tr>
<tr ng-repeat="item in data : orderBy: 'name'" ng-show="mode === 'somethingelse'">
<td>{{item.name}}</td>
</tr>
解决方案3
1 2014-09-14 11:21:28
这个怎么样。 检查此JSFiddle ： http : //jsfiddle.net/vxcjw45d/1/
如果不是您要查找的内容，请告诉我-我将其删除:)
HTML：
<body ng-app="myApp">
<table ng-controller="myController">
<tr ng-repeat="item in data | orderBy: 'name'"
ng-if="mode === 'something'">
<td>{{ item.name }}</td>
</tr>
<tr ng-repeat="item in data | orderBy: 'name'"
ng-if="mode === 'somethingelse'">
<td>{{ item.age }}</td>
</tr>
<tr>
<td>
<button ng-click="changeMode()">
Change Mode
</button>
</td>
</tr>
</table>
</body>
JS：
var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope) {
$scope.data = [
{ name: 'John', age: 21 },
{ name: 'Doe', age: 33 }
];
$scope.mode = 'something';
$scope.changeMode = function() {
if ($scope.mode === 'something') {
$scope.mode = 'somethingelse';
} else if ($scope.mode === 'somethingelse') {
$scope.mode = 'something'
}
};
});
访问 ng-repeat 范围
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.