Question

我有一个angularjs页面，它有一个ng-repeat＆lt; ul＆gt;数据点列表。每个＆lt; li＆gt;有一个删除链接（称为删除1），单击时需要隐藏删除1链接并在其位置显示另外2个链接：取消和删除（称为删除2）。单击“取消”链接时，需要显示原始“删除1”链接，并且需要隐藏“取消”和“删除2”链接。所有这一切目前都有效，但现在有了新的要求。

单击“删除1”链接时，其他列表项上的所有“取消和删除2”链接对都需要隐藏。由于AngularJS是基于单一操作的，因此我为deleteLinkClick和cancelLinkClick创建了一个函数，以执行所需的复杂操作。

当您查看下面提供的控制器代码时，您会看到show flag设置为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

Answer 1

我想提出一个更有棱角的解决方案。我希望这有用。

首先定义一个合适的模型：

   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的函数，当单击第二个Delete链接时，该函数将从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>

我们通过将ng-hide绑定到model.selected == item表达式来显示第一个删除链接，以便在所选项目是当前项目时隐藏链接。

我们通过将ng-show绑定到表达式model.selected==item来显示第二对链接（删除和取消），以便当所选项目是当前项目时链接可见。

单击“取消”链接时，我们将所选项目设置为{}，以便每个项目的所有链接显示未选择状态（仅显示“取消”链接）。

最后，我们将ng-click绑定到范围内定义的reallyDelete函数的Delete链接。删除成功后，我们重置所选项目，以便每个项目的所有链接再次显示未选择状态。

通过使用简化模型，并利用角度绑定表达式，可以实现相当复杂的行为。

Here is a Plunker

angularjs ngrepeat设置数组值不起作用

1 个答案: