0

選択されたすべてのアイテムを保持する選択された配列があります。したがって、チェックボックスを変更すると、項目がその配列に追加または削除されます。問題は、選択した配列が他の何かによって変更された場合、チェックボックスが更新されないことです。

私のアプリでは、URLに応じてアイテム配列が再設定されるため、アイテム自体に選択された状態を保存することはオプションではありません。したがって、選択された配列は、選択したすべてのアイテムを保持するグローバル配列です。コンテキストを与えるために、私のアプリはファイル ブラウザーであり、さまざまなディレクトリ内のファイルを選択できます。

プランカー

http://plnkr.co/edit/h9t3caBzk7hyTYJysCay?p=preview

js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.selected = ['one'];
  $scope.items = ['one', 'two', 'three'];

  $scope.select = function (item, s) {

    if (s) {
      return $scope.selected.push(item);  
    }

    $scope.selected.splice($scope.selected.indexOf(item.path), 1); 

  }

});

app.controller('ItemCtrl', function ($scope) {

  $scope.s = $scope.selected.some(function (i){
    return i === $scope.item;
  })

})

HTML

<body ng-controller="MainCtrl">

  <button ng-click='selected.length = 0'>Clear selected</button>

  <p ng-repeat='item in items' ng-controller='ItemCtrl'>
   <input type='checkbox' ng-change='select(item, s)' ng-model='s' /> {{item}}
  </p>

  {{selected}}

</body>
4

2 に答える 2

1

私はあなたのプランカーを少しフォークして修正しました：

http://plnkr.co/edit/usoaJN8O0BE0J1vIdSwB?p=preview

それで、私がしたことは$scope.selectedオブジェクトに変更され、各チェックボックスng-modelをそれにバインドし、各項目の値をキー（ng-model=selected[item]）として機能させました。

また、を繰り返し処理し、選択したすべてのアイテムを配列形式で返す関数を追加して$scope.selected、目的の最終出力であると想定しているものと一致させます。

このアプローチの理由は、一般的に、ng-model必要な情報 (この場合は何が選択されているかどうか) と双方向のデータバインディングを管理するすべての作業を任せたいからです。これにより、通常、コードが少なくなり、コードがきれいになるように感じます。

于 2013-07-26T17:19:06.610 に答える