AngularJS Checkbox, wenn in ng-repeat

Question

Ich weiß, dass die Lösung nicht sehr hübsch, aber es ist nötig für die Vorlage in ich arbeite.

Jetzt funktioniert es, und es zeigt mir den „Added“ spa- Element, wenn die Produkte in der Liste waren.

<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> 

Was ich will, ist es das Kontrollkästchen aktiviert, um zu überprüfen, wenn der „Added“ Text auch hinter der Checkbox erscheint.

habe ich versucht, es mit zu tun:

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

Aber das funktioniert nicht. Da die Produkte in einem Array wie:

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

Und die my.profile.items ist ein Array mit mehr Informationen dann oben. Weil es eine Viele-zu-Viele-Beziehung ist, in der ich sie gespeichert habe.

Gibt es sogar einen Weg, dies zu tun? Ich habe nicht eine schmutzige Lösung dagegen: P

Ich versuchte dies:

// 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.. 

      } 
     }); 
    }); 

}; 

Das gibt: TypeError: Cannot read property 'push' of undefined

Answer 1

Fügen Sie diese Funktion auf Ihrem Controller:

$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; 
}; 

Und für Ihre HTML verwenden

<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> 

Answer 2

Fügen Sie diese nach der Checkbox

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

und entfernen Sie die div.

Answer 3

Sie so etwas wie dieses AngularJs ng-checked using a function

implementieren müssen Sie müssen nur Ihre eigene Logik implementieren basierend auf Ihrem vielen zu vielen Produkt-Array und geben Sie entsprechend wahr oder falsch zurück.

Answer 4

Ein anderer Trick, den Sie tun können, ist ein Ansichtsmodell speziell für Ihre Bedürfnisse zu erstellen.

So haben Sie zum Beispiel das Array von Produkten und Artikeln im Profil.

In der Steuerung, könnten Sie so etwas wie:

$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}); 
}); 

Jetzt, wo Sie Ihre Daten erstellt haben, wie in der Ansicht benötigt, dann können Sie einfach do:

<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> 

Wenn ich Kombinierte Daten aus mehreren Quellen Ich bevorzuge es vorher in der Steuerung zu verarbeiten und erstellen Sie eine viewModel, die mein Leben in der Ansicht erleichtert.