採用NG-重複

這裏如果複選框被選中angularjs是我的HTML採用NG-重複

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

});`

它輸出這樣的：

每秩序我想知道如果有任何訂單項已被選中，那麼我就可以顯示提交b utton。

在複選框上，我嘗試過ng-repeat和ng-model，目前爲止沒有成功。

來源

2017-06-06 MikeeeGeee

您可以粘貼您從阿勒woocommerce – Satya

讓我覺得woocommerce JSON數據是不相干的樣本JSON輸出。我只需要在控制器中的某些東西知道是否有任何複選框被檢查，如果是的話，然後顯示一個按鈕。 – MikeeeGeee

只有當我們查看您分配給您的訂單變量的數據時，我們才能嘗試幫助 – Satya

爲每個訂單項目創建指令/組件，以便您可以隔離每個訂單的範圍。然後檢查每個項目的更改。

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="[email protected]" 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>

來源

2017-06-06 16:01:44 Hoyen

回答

相關問題