Angular -- accessing variables defined inside ngRepeat from outside

Question

I am implementing in-place element editing in my Angular app and based my code on this answer https://stackoverflow.com/a/15453512/2026098, using an editing variable for each entry inside ng-repeat.

See http://jsfiddle.net/LYtQU/2/.

I would now like to access this variable from outside the scope of ng-repeat in order to conditionally show/hide an element. Basically, I would like to do something like ng-hide="if any entry has editing==true":

<div class="note" ng-hide="if any entry has editing==true">This should disappear when any entry is being edited</div>        
<div class="entry" 
     ng-repeat="entry in entries"
     ng-class="{'editing': editing}">

    <span ng-hide="editing" ng-click="editing=true">{{ entry.name }}</span>
    <span ng-show="editing" ng-click="editing=false">Editing entry...</span>
</div>

I am trying to avoid using jQuery as the editing variable seems perfect for the job, but just out of reach from my comprehension...

score 1 · Accepted Answer · answered Jul 26 '13 at 09:35

Set up a count in the controller and increment/decrement everytime editing is toggled. Then show the message if the count is 0.

function MainCtrl($scope) {
    $scope.state = {editing: 0};
    $scope.entries = [{name: 'Entry 1'}, {name: 'Entry 2'}];
};

<body ng-app>
    <div ng-controller="MainCtrl">
        <div class="note" ng-show="state.editing == 0">This should disappear when any entry is being edited</div>        
        <div class="entry" 
             ng-repeat="entry in entries"
             ng-class="{'editing': editing}">

            <span ng-hide="editing" ng-click="editing=true; state.editing = state.editing + 1">{{ entry.name }}</span>
            <span ng-show="editing" ng-click="editing=false; state.editing = state.editing - 1">Editing entry...</span>
        </div>
    </div>
</body>

http://jsfiddle.net/LYtQU/5/

Angular -- accessing variables defined inside ngRepeat from outside

1 Answers1