CODEWITHSUNDEEP
javascriptangularjsangularjs-scopeangularjs-ng-repeat
Rahul Dole
Rahul Dole

Reputation: 3093

Unbinding ng-repeat scope

I have two <tr>s and an ng-repeat on each, but both perform the same operation on their child elements, like so:

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

Imagine, there are two types of data sets and which one is to be rendered is decided by the mode property at run time. So, either the first <tr> is rendered in the DOM or the other one. Initially the first <tr> will be rendered and the associated filterFunc function will work properly. There's a simple drop down which has two options, one each for the two modes. If you select the other mode, the second <tr> will be rendered and first one will be removed from the DOM. The problem is, the filterFunc now is bound to both the <tr>s and operates on both of them. How do I unbind the scope or watchers for the first one let it be bound only to the second one? or any one of them at any point of time? Here's the fiddle http://jsfiddle.net/6kx4ojL4/

Note: For the sake of simplicity, I have simply returned the passed-in data object as-is in filterFunc. Check the output in browser console. It gets called twice, i.e. for both data sets.

Upvotes: 0

Views: 278

Answers (3)

Hristo Enev
Hristo Enev

Reputation: 2541

How about this. Check this JSFiddle: http://jsfiddle.net/vxcjw45d/1/

If it's not what are you looking for tell me - I will delete it :)

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

Upvotes: 1

Vikram Babu Nagineni
Vikram Babu Nagineni

Reputation: 3549

Use ng-show instead of 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>

Upvotes: 1

ABOS
ABOS

Reputation: 3823

It is not clear what you want to do exactly from your description. My first thought is that you could separate your modes in ng-if, say, use mode1 and mode2, so you can control two <tr>s separately..

Upvotes: 1

Related Questions