0

データポイントの ng-repeat <ul> リストを持つ angularjs ページがあります。各 <li> には削除リンク (これを削除 1 と呼びます) があり、クリックするとその削除 1 リンクを非表示にし、その場所にさらに 2 つのリンクを表示する必要があります: キャンセルと削除 (これを削除 2 と呼びます)。[キャンセル] リンクをクリックすると、元の [削除 1] リンクが表示され、[キャンセル] リンクと [削除 2] リンクが非表示になる必要があります。現在、これはすべて機能していますが、新しい要件があります。

削除 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
  ]
)

前もって感謝します

-w

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また、2 番目の [削除] リンクがクリックされたときに 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 を式にバインドして、2 番目のリンクのペア (削除とキャンセル) をmodel.selected==item表示し、選択したアイテムが現在のアイテムである場合にリンクが表示されるようにします。

キャンセル リンクがクリックされると、選択されたアイテムを {} に設定して、各アイテムのすべてのリンクが選択されていない状態を表示するようにします (キャンセル リンクのみを表示します)。

最後に、削除リンクの ng-click を、reallyDeleteスコープで定義されている関数にバインドします。削除が成功したら、選択したアイテムをリセットして、各アイテムのすべてのリンクが選択されていない状態を再び表示するようにします。

単純化されたモデルを使用し、Angular バインディング式を利用することで、かなり複雑な動作を実現できます。

こちらがプランカー

于 2014-07-10T04:14:20.193 に答える