2013-07-26 51 views
0

我在我的Angular應用程序中實現就地元素編輯,並基於此代碼對此回答https://stackoverflow.com/a/15453512/2026098,對ng-repeat中的每個條目使用editing變量。Angular - 從外部訪問ngRepeat中定義的變量

請參閱http://jsfiddle.net/LYtQU/2/

我現在想從ng-repeat範圍之外訪問這個變量,以便有條件地顯示/隱藏一個元素。基本上,我想這樣做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> 

我試圖避免使用jQuery作爲editing變量似乎完美的工作,但剛走出從我的理解範圍的...

回答

1

在控制器中設置計數並在每次編輯切換時遞增/遞減。然後顯示該消息,如果計數爲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/