Question

我有两个<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属性决定的。因此，要么在DOM中呈现第一个<tr>，要么在另一个中呈现<tr>。最初将呈现第一个filterFunc，相关的mode功能将正常运行。这是一个简单的下拉菜单，有两个选项，分别用于两个<tr>。如果您选择其他模式，则将呈现第二个filterFunc，并且将从DOM中删除第一个<tr>。问题是，filterFunc现在绑定到{{1}}并同时对它们进行操作。如何解开第一个范围或观察者的范围，让它仅限于第二个范围？或者他们中的任何一个在任何时间点？这是小提琴http://jsfiddle.net/6kx4ojL4/

注意：为简单起见，我只是在{{1}}中按原样返回传入的数据对象。检查浏览器控制台中的输出。它被调用两次，即两个数据集。

Answer 1

目前尚不清楚您想要从您的描述中做些什么。我的第一个想法是你可以在ng-if中分离你的模式，比如使用mode1和mode2，这样你就可以分别控制两个＆lt; tr＆gt; ..

Answer 2

使用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>

Answer 3

这个怎么样？检查此 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'
        }
    };
});

解除绑定重复范围

3 个答案: