CODEWITHSUNDEEP
angularjsangularjs-scopeangularjs-ng-repeat
davidlee
davidlee

Reputation: 6167

How to have unique scope in ng-repeat in Angular.js

Is it possible for me to have multiple array for $scope?

I have a list of div with child scopes that is generated from a parent scope in ng-repeat. How can I have the scope variable individually unique?

I am generating a list of ng-repeat in another ng-repeat.

<div ng-repeat="" ng-init="hide=true" ng-click="hide=!hide">
     <div ng-hide="hide" ng-init="childhide=true" ng-click="childhide=!childhide">
          <div ng-repeat="" ng-init="childhide" ng-hide="childhide">
               <div>{{ variable }}</div>
          </div>
     </div>
</div>

How can I have the variable unique? Since each time when I click on either one div, all div with childhide variable will show. Is there a way to make them behave individually?

Upvotes: 0

Views: 320

Answers (1)

StickyCube
StickyCube

Reputation: 1721

To get a new $scope for each div, the first ting that comes to mind is to create another directive and specify which type of scope you want.

<div class="container">
    <div ng-repeat="item in items"></div>
</div>

will become:

<div class="container">
    <inner-directive ng-repeat="item in items"></inner-directive>
</div>

then in inner-directive:

app.directive('innerDirective', function () {
    return {
        restrict: 'E',
        template: '<div></div>', // this replaces what you had before
        scope: {}
    };
});

This will create an isolate scope, which does not inherit properties from it's parent.

There are a couple of other scope options but i cant remember off the top of my head what each one does. Easy to read in the docs though.

Upvotes: 2

Related Questions