2

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

タグ ボタンのリストがあります。デフォルトでは、すべてのアイテムが読み込まれた後、最初の 3 つのアイテムにselectedクラスを設定します。

selectedでクラスを獲得または喪失するためのタグも必要ng-clickです。

マークアップまたはコントローラーでコードをどのように組み合わせますか?

.controller('PageCtrl',
    ['$scope',
    function($scope) {

    var vs = $scope;
    vs.message = "1st, 2nd and 3rd item should be selected by default:";

    // Gives the 1st 3 items the selected class
    vs.toggleTags = { item: [0, 1, 2] };

    // the ng-click to individually toggle the selected class:
    vs.selectTag = function(term) {
        alert(term +' in tag #'+ vs.toggleTags.item);
    };

    vs.tags = [
      {name: 'aaa'},
      {name: 'bbb'},
      {name: 'ccc'},
      {name: 'ddd'},
      {name: 'eee'},
      {name: 'fff'},
      {name: 'ggg'}
    ];

}]);

HTML

<ul>
    <li ng-repeat="(k, m) in tags"
        ng-class="{'selected':toggleTags.item.indexOf(k) > -1}"
        ng-click="toggleTags.item = $index; selectTag(m.name)">
        <div class="tag">{{m.name}}</div>
    </li>
</ul>

{'selected' : toggle.state}基本的には、次のようなものを組み合わせたいと思います:ng-class行に。現在、私のコードはすべての選択を解除しています。

ここに画像の説明を入力

何か案は？

4

4 に答える 4

1

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

新しい plnkr (切り替え用): http://plnkr.co/edit/bqXi4GHxJjbD03ilJ4Me?p=preview

このようなことができます。内部で追加の変数を使用するtags

vs.tags = [
  {name: 'aaa', active: true},
  {name: 'bbb', active: true},
  {name: 'ccc', active: true},
  {name: 'ddd', active: false},
  {name: 'eee', active: false},
  {name: 'fff', active: false},
  {name: 'ggg', active: false}
];
于 2015-04-21T18:25:51.227 に答える
1

サーバーから取得したデータを変更したくない場合は、選択モデルを個別に作成できます。

<li ng-repeat="(k, m) in tags"
          ng-class="{'selected':selectedModel[$index]}"
          ng-click="selectedModel[$index] = !selectedModel[$index]">

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

多くの場合、インデックスがある場合は、インデックスではなく ID を使用することをお勧めします。

于 2015-04-21T18:35:04.513 に答える