如果使用 ng-repeat 检查了 angularjs 复选框答案

【问题标题】：If checkboxes are checked angularjs using ng-repeat如果使用 ng-repeat 检查了 angularjs 复选框
【发布时间】：2017-06-07 00:23:39
【问题描述】：

这是我的 HTML

    <div ng-controller="Orders">
        <div ng-repeat="order in orders">
          <form>
            <div ng-repeat="item in order.line_items">
                <input type="checkbox" name="order_{{order.id}}_items[]"?> {{item.name}}
            </div>
          </form>
        </div>
    </div>

这是我的控制器：

app.controller("Orders", function($scope, WC) {
    var Woocommerce = WC.WC();
    // get orders from json
    Woocommerce.get('orders?filter[post_status]=wc-processing&?filter[limit]=-1', function(err, data, res){
        var obj = JSON.parse(res);
        console.log(obj.orders);
        $scope.orders = obj.orders;
        $scope.$apply()
    });

});`

它输出这个：

对于每个订单，我想知道是否有任何订单项目已被选中，这样我就可以显示一个提交按钮。

在复选框上我尝试了ng-repeat 和ng-model，但到目前为止没有成功。

【问题讨论】：

您能否粘贴您从 woocommerce 获得的示例 json 输出
我觉得 woocommerce json 数据无关紧要。我只需要控制器中的一些东西来知道是否有任何复选框被选中，如果是，则显示一个按钮。
只有当我们查看您分配给您的订单变量的数据时，我们才能尝试提供帮助
如果您查看文档中的 JSON 响应，您会看到我收到的数据类型：woocommerce.github.io/woocommerce-rest-api-docs/…
设置复选框输入 ng-model="item.isSelected"。还要在作用域/控制器中创建一个函数来监听 ng-change="doChange"。在 doChange 函数中，循环或对 items.isSelected==true 进行过滤。如果项目存在，则显示提交按钮。

标签： angularjs checkbox angularjs-ng-repeat

【解决方案1】：

为每个订单项创建一个指令/组件，以便您可以隔离每个订单的范围。然后检查每个项目的更改。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  
  $scope.orders=[
      {
        id: 1,
        line_items: [
          {
            id: 1,
            "name": "item 1"
          },
          {
            id: 2,
            "name": "item 2"
          
          }
        ]
      },
      {
        id: 2,
        line_items:[
          {
            id: 3,
            "name": "item 3"
          },
          {
            id: 4,
            "name": "item 4"
          }
        ]
      }
    ]
});

app.component('order', {
  template: '<h2>Order {{$ctrl.order.id}}</h2><div ng-repeat="item in $ctrl.order.line_items"><label><input type="checkbox" ng-model="item.isSelected" ng-change="$ctrl.doChange()"> {{item.name}}</label></div><div ng-show="$ctrl.showButton"><input type="submit" value="Submit" /></div>',
  bindings: {
    order: '=ngModel',
    
  },
  controller: function() {
    this.showButton = false;
    this.doChange = function(){
      var checkedItems = this.order.line_items.filter( (item)=>{
        return item.isSelected;
      });
      this.showButton = (checkedItems && checkedItems.length>0)
    }
    
  }
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">

    <section class="orders" ng-repeat="order in orders">
        <Order ng-model="order"></Order>
    </section>
    
  </body>

</html>

【讨论】：