Javascript 解除绑定重复作用域_Javascript_Angularjs_Angularjs Scope_Angularjs Ng Repeat

Javascript 解除绑定重复作用域

javascript angularjs

Javascript 解除绑定重复作用域,javascript,angularjs,angularjs-scope,angularjs-ng-repeat,Javascript,Angularjs,Angularjs Scope,Angularjs Ng Repeat,我在每个元素上都有两个和一个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 === 'somethingel

我在每个元素上都有两个

和一个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>


{{item.name}
{{item.name}

想象一下，有两种类型的数据集，在运行时由

模式

属性决定渲染哪一种数据集。因此，要么第一个

在DOM中呈现，要么另一个呈现。最初将呈现第一个

，相关的

过滤器功能将正常工作。有一个简单的下拉菜单，有两个选项，两个模式各一个。如果选择其他模式，将呈现第二个模式，并从DOM中删除第一个模式。
问题是，filterFunc
现在绑定到这两个
并在这两个上运行。
如何解除第一个的作用域或观察者的绑定，使其仅绑定到第二个？或者他们中的任何一个在任何时候？这是小提琴
注意：为了简单起见，我只返回了传入的数据对象，如filterFunc
中所示。在浏览器控制台中检查输出。它会被调用两次，即针对两个数据集。
根据您的描述，不清楚您到底想做什么。我的第一个想法是，如果使用mode1和mode2，您可以在ng中分离模式，这样您就可以分别控制两个s
 根据您的描述，不清楚您到底想做什么。我的第一个想法是，如果使用mode1和mode2，您可以在ng中分离模式，这样您就可以分别控制两个s
 根据您的描述，不清楚您到底想做什么。我的第一个想法是，如果使用mode1和mode2，您可以在ng中分离模式，这样您就可以分别控制两个s
 根据您的描述，不清楚您到底想做什么。我的第一个想法是，如果使用mode1和mode2，您可以在ng中分离模式，这样您就可以分别控制两个s
 如果需要，使用ng show而不是ng
<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>


{{item.name}
{{item.name}
如果需要，请使用ng show而不是ng
<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>


{{item.name}
{{item.name}
如果需要，请使用ng show而不是ng
<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>


{{item.name}
{{item.name}
如果需要，请使用ng show而不是ng
<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>


{{item.name}
{{item.name}
这个怎么样。检查此JSFiddle：
如果不是你想要的，告诉我-我会删除它：）
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>

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'
        }
    };
});

这个怎么样。检查此JSFiddle：
如果不是你想要的，告诉我-我会删除它：）
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>

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'
        }
    };
});

这个怎么样。检查此JSFiddle：
如果不是你想要的，告诉我-我会删除它：）
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>

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'
        }
    };
});

这个怎么样。检查此JSFiddle：
如果不是你想要的，告诉我-我会删除它：）
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>

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中使用double equal if=“mode==”something'”给我们更多的代码（按钮和函数）以便更好地理解您的问题。您能给我一个plunker吗？或者尝试在ng中使用double equal if=“mode==”something'”给我们更多的代码（按钮和函数）以便更好地理解您的问题。您能给我一个plunker吗？或者尝试在ng中使用double equal if=“mode==”something'”给我们更多的代码（按钮和函数）以便更好地理解您的问题。您能给我一个plunker吗？或者尝试在ng if=“mode==“something”中使用double equal，为我们提供更多的代码（按钮和函数），以便更好地理解您的问题。即使我这样做，问题仍然存在。分页函数被调用两次，在第二个函数也被加载后，两个
各调用一次。我需要对两者使用相同的功能，因为对两者都需要相同的操作。即使我这样做，问题仍然存在。分页函数被调用两次，在第二个函数也被加载后，两个
各调用一次。我需要对两者使用相同的功能，因为对两者都需要相同的操作。即使我这样做，问题仍然存在。分页函数被调用两次，在第二个函数也被加载后，两个
各调用一次。我需要对两者使用相同的功能，因为对两者都需要相同的操作。即使我这样做，问题仍然存在。分页函数被调用两次，在第二个函数也被加载后，两个
各调用一次。我需要对两者使用相同的函数，因为这是对两者所需的相同操作。问题是在第二个
也被加载后，分页函数被调用了两次。绑定不会得到更新，相反，它们只是相加！正如我所说的，如果没有实际的代码，我们很难弄清楚您想要做什么，即使是带有一些相关细节的简化版本的代码也会有所帮助。至于你的评论，当你说绑定不会得到更新时，我想你可以使用一些方法，比如$watch、$boradcast等等。我知道，我现在添加了fiddle。问题是在第二个
也被加载后，分页函数被调用了两次。绑定不会得到更新，相反，它们只是相加！正如我所说的，如果没有实际的代码，我们很难弄清楚您想要做什么，即使是带有一些相关细节的简化版本的代码也会有所帮助。至于你的评论，当你说绑定不会得到更新时，我想你可以使用一些方法，比如$watch、$boradcast等等。我知道，我现在添加了fiddle。问题是在第二个
也被加载后，分页函数被调用了两次。绑定不会得到更新，相反，它们只是相加！正如我所说，我们很难弄清楚你想要什么