angularjs ngrepeat設置數組值不工作

我有一個angularjs頁面，它有一個ng-repeat <ul>數據點列表。每個<li>都有一個刪除鏈接（稱爲刪除1），點擊時需要隱藏該刪除1鏈接並在其位置顯示另外2個鏈接：取消和刪除（稱爲刪除2）。點擊取消鏈接後，需要顯示原始刪除1鏈接，並且需要隱藏取消和刪除2鏈接。目前所有這些都有效，但現在有一個新的要求。angularjs ngrepeat設置數組值不工作

當單擊刪除1鏈接時，其他列表項上的所有「取消和刪除2」鏈接對都需要隱藏。由於AngularJS是基於單一操作的，我爲deleteLinkClick和cancelLinkClick創建了一個函數來完成所需的複雜操作。

當您查看下面提供的控制器代碼時，您會看到show標誌被設置爲false，但它不起作用。建議？

這裏是我的（苗條）html頁面：

... OTHER STUFF... 
    ul 
     li.address ng-repeat="data in request.theData" ng-init="showWarning=[]" 
     .address-li 
      .address-details 
      p 
       |Field 1: {{data.field1}} 
       span ng-if="data.field2!=''" 
       br 
       |Field 2: {{data.field2}} 
      span 
       span.button-small.button-cancel ng-show="!showWarning[$index]" ng-click="deleteLinkClick(showWarning,$index)" Delete 
       span.button-small.button-cancel ng-show="showWarning[$index]" ng-click="cancelLinkClick(showWarning,$index)" Cancel 
       span.button-small.button-delete.button-warn ng-show="showWarning[$index]" ng-click="deleteAddress($index)" Delete 

... OTHER STUFF...

這是我（的CoffeeScript）控制器代碼：

@MyPage.controller('MyController', 
    ['$scope', '$rootScope', '$location', 'NtdRequest', 'Form', '$anchorScroll' 
    ($scope, $rootScope, $location, ntd_request, form, $anchorScroll) -> 
     $scope.currentIndex = -1 

     $scope.cancelLinkClick = (array,index) -> 
     array[index] = false 
     $scope.currentIndex = -1 

     $scope.deleteLinkClick = (array,index) -> 
     if ($scope.currentIndex != -1) 
      array[$scope.currentIndex] = false 
     array[index] = true 
     $scope.currentIndex = index 
    ] 
)

預先感謝您

-WH

來源

2014-07-10 user3739584

我想提出一個更有針對性的解決方案。我希望這是有幫助的。

首先定義一個適當的模型：

var app = angular.module('app', []); 
    app.controller('ctrl', function ($scope) { 
     $scope.model = {}; 
     $scope.model.data = []; 
     $scope.model.data.push({ name: 'item1' }); 
     $scope.model.data.push({ name: 'item2' }); 
     $scope.model.data.push({ name: 'item3' }); 
     $scope.model.data.push({ name: 'item4' }); 
     $scope.model.selected = {}; 

     $scope.reallyDelete = function(item) { 
      alert('Really delete item ' + item.name); 
      $scope.model.selected = {}; 
     } 

    });

我們已經定義了跟蹤所選項目的模型，並提供項目的數組。

我們還定義了一個稱爲reallyDelete的函數，當單擊第二個刪除鏈接時，該函數將從UI調用。

這裏查看：

<body ng-app="app" ng-controller="ctrl"> 
    <table> 
     <tr ng-repeat="item in model.data"> 
      <td> {{item.name }}</td> 
      <td><a href="#" ng-hide="model.selected == item" 
         ng-click="model.selected=item;">Delete</a> 
       <span ng-show="model.selected == item"> 
        <a href="#" ng-click="reallyDelete(item)">Delete</a>&nbsp; 
        <a href="#" ng-click="model.selected={};">Cancel</a> 
       </span> 
      </td> 
     </tr> 
    </table> 
</body>

我們展示吳隱藏結合到model.selected == item表達先刪除鏈接，該鏈接是隱藏的，當所選擇的項目是當前項目。

我們通過將ng-show綁定到表達式model.selected==item來顯示第二對鏈接（刪除和取消），以便當所選項目是當前項目時鏈接可見。

單擊取消鏈接時，我們將所選項目設置爲{}，以便每個項目的所有鏈接都顯示未選中狀態（僅顯示取消鏈接）。

最後，我們將刪除鏈接的ng-click綁定到在作用域上定義的reallyDelete函數。刪除成功後，我們重置所選項目，以便每個項目的所有鏈接再次顯示未選定狀態。

通過使用簡化模型並利用角度綁定表達式，可以實現相當複雜的行爲。

Here is a Plunker

來源

2014-07-10 04:14:20 pixelbits

angularjs ngrepeat設置數組值不工作

回答

相關問題