0

我有一个 angularjs 页面，其中有一个 ng-repeat <ul> 数据点列表。每个 <li> 都有一个删除链接（称为删除 1），单击该链接时需要隐藏删除 1 链接并在其位置显示另外 2 个链接：取消和删除（称为删除 2）。当点击取消链接时，原来的删除1链接需要显示，取消和删除2链接需要隐藏。所有这些目前都有效，但现在有一个新的要求。

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

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

这是我的（咖啡脚本）控制器代码：

@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

4

1 回答 1

0

我想提出一个更有角度的解决方案。我希望这是有帮助的。

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

   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>

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

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

当点击 Cancel 链接时，我们将选中的项目设置为 {}，以便每个项目的所有链接都显示未选中状态（仅显示 Cancel 链接）。

最后，我们将删除链接的 ng-click 绑定到reallyDelete作用域上定义的函数。删除成功后，我们重置选中的item，让每个item的所有链接再次显示未选中状态。

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

这是一个Plunker

于 2014-07-10T04:14:20.193 回答