解決策があまりきれいではないことは知っていますが、作業しているテンプレートには必要です。
これで機能し、製品がリストに含まれていたときに「追加された」スパン要素が表示されます。
<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
この関数をコントローラーに追加します。
$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>
実行できるもう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 を作成することを好みます。
このようなものを実装する必要があります AngularJs ng-関数を使用してチェック
多対多の製品配列に基づいて独自のロジックを実装し、それに応じてtrueまたはfalseを返す必要があります。
チェックボックスの後にこれを追加します
<span ng-if="my.profile.items.indexOf(product) >= 0">added</span>
div
を削除します。