AngularJS 在 ng-repeat 中检查复选框

Question

我知道解决方案不是很漂亮，但我正在使用的模板需要它。

现在可以使用了，当产品在列表中时，它会向我显示 "Added" 跨度元素。

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

我想要的，就是把checkbox打勾，当"Added"文字也出现在checkbox后面的时候。

我试过这样做：

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

            }
        });
    });

};

这个returns：TypeError: Cannot read property 'push' of undefined

Answer 1

在复选框后添加这个

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

并删除 div.

Answer 2

将此功能添加到您的控制器：

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

你需要实现这样的东西AngularJs ng-checked using a function

您只需要根据您的多对多产品数组和相应的 return true 或 false 实现您自己的逻辑。

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，这将使我在视图中的生活变得轻松。

AngularJS 在 ng-repeat 中检查复选框

AngularJS checkbox checking when in ng-repeat

angularjs

checklist-model