Question

这是我的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的复选框上，目前尚未成功。

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

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

1 个答案: