web-dev-qa-db-ja.com

ng-repeatの場合のAngularJSチェックボックスチェック

解決策があまりきれいではないことは知っていますが、作業しているテンプレートには必要です。

これで機能し、製品がリストに含まれていたときに「追加された」スパン要素が表示されます。

<section ng-repeat="product in products">
    <label>
        <input type="checkbox" 
            checklist-model="foobar.products" 
            checklist-value="product.id">
        {{ product.name }}
    </label>

    <div ng-repeat="current_item in my.profile.items">
        <span ng-show="product.id==current_item.id">Added</span>
    </div>
</section>

チェックボックスの後ろに「追加」のテキストも表示されている場合は、チェックボックスをオンにします。

私はそれをやってみました：

<ng-checked="{{my.profile.items.array.thing}}">

しかし、それは機能していません。配列内の製品は次のようなものであるため：

[{       
    id: 1, name:"Trinity",
    id: 2, name:"Van Gogh",
    id: 3, name:"Bonaqua",
}]

そしてその my.profile.itemsは、上記よりも多くの情報を含む配列です。それは私がそれを保存した多対多の関係だからです。

これを行う方法さえありますか？私は汚い解決策を気にしません：P

私はこれを試しました：

// NG-check function
$scope.checkStoredValues = function(my) {

    // Loop trought my current stored items
    angular.forEach(my.profile.items, function(value, key) {

        // Loop trough the array    
        angular.forEach(value, function(value, key) {
            console.error(key);

            // If key == 'id'
            if(key == 'id'){
                // Push the value to the Array of the checkboxes,
                // so it's checked 
                // # Docs: http://vitalets.github.io/checklist-model/
                console.info(value); // Return's: integer 
                foobar.products.Push(value); // Needs more then an integer I guess..

            }
        });
    });

};

これは次を返します：TypeError: Cannot read property 'Push' of undefined

angularjschecklist-model
8
user1867254

この関数をコントローラーに追加します。

$scope.isChecked = function(product) {
  var items = $scope.my.profile.items;
  for (var i=0; i < items.length; i++) {
    if (product.id == items[i].id)
      return true;
  }

  return false;
};

そしてあなたのhtmlの使用のために

<section ng-repeat="product in products">
    <label>
        <input type="checkbox" 
               ng-checked="isChecked(product)">
        {{ product.name }}
    </label>

    <div ng-repeat="current_item in my.profile.items">
        <span ng-show="product.id==current_item.id">Added</span>
    </div>
</section>
10
bumpy

実行できるもう1つのトリックは、ニーズに固有のビューモデルを作成することです。

たとえば、プロファイル内に一連の製品とアイテムがあります。

コントローラでは、次のようなことができます。

 $scope.products.forEach(function(p){
       var items = $scope.my.profile.items;
       var wasAdded = false;
       for (var i=0; i < items.length; i++) {
           if (product.id == items[i].id)
                 wasAdded =  true;
                 i = items.length;
        }
       $scope.productsViewModels.Push({product:p, added:wasAdded});
 });

ビューで必要に応じてデータを作成したので、次のように簡単に実行できます。

 <section ng-repeat="p in productsViewModels">
     <label>
         <input type="checkbox" 
             ng-checked = "p.added"
             checklist-model="foobar.products" 
             checklist-value="p.product.id">
              {{ p.product.name }}
     </label>

     <span ng-show="p.added">Added</span>
 </section>

複数のソースからのデータを結合した場合、以前にコントローラーでデータを処理し、ビューでの作業を容易にする viewModel を作成することを好みます。

4
asoto

このようなものを実装する必要があります AngularJs ng-関数を使用してチェック

多対多の製品配列に基づいて独自のロジックを実装し、それに応じてtrueまたはfalseを返す必要があります。

2
Syed Ekram Uddin

チェックボックスの後にこれを追加します

<span ng-if="my.profile.items.indexOf(product) >= 0">added</span>

divを削除します。

0
Adrian Ber