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设置数组值不工作

回答

相关问题