AngularJS चेकबॉक्स चिह्नित जब एनजी-दोहराने में

Question

मैं जानता हूँ कि समाधान बहुत सुंदर नहीं है, लेकिन यह मैं में काम कर रहा हूँ टेम्पलेट के लिए आवश्यक है।

अब यह काम करता है, और यह मेरे से पता चलता "जोड़ा गया" span- तत्व जब उत्पाद सूची में था।

<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 तो ऊपर अधिक जानकारी के साथ एक सरणी है। क्योंकि यह कई से अधिक संबंध है जहां मैंने इसे संग्रहीत किया था।

क्या ऐसा करने का कोई तरीका भी है? मैं एक गंदा समाधान कोई आपत्ति नहीं है: पी

मैं इस कोशिश की:

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

Answer 1

अपने नियंत्रक को यह समारोह जोड़ें:

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

Answer 2

चेकबॉक्स

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

के बाद इस जोड़े और div को हटा दें।

Answer 3

आप इस AngularJs ng-checked using a function

तुम सिर्फ अपने खुद के तर्क लागू करने की आवश्यकता की तरह कुछ लागू करने की आवश्यकता आपके कई उत्पादों के आधार पर कई उत्पाद सरणी के आधार पर और सही या गलत लौटते हैं।

Answer 4

एक और चाल जो आप कर सकते हैं वह आपकी ज़रूरत के लिए एक दृश्य मॉडल विशिष्ट है।

तो उदाहरण के लिए आपके पास प्रोफ़ाइल के भीतर उत्पादों और वस्तुओं की सरणी है। अब सरल करते

$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 बनाता हूं जो मेरे जीवन को दृश्य में आसान बनाता है।