Wenn Kontrollkästchen geprüft AngularJS mit ng-repeat

Hier ist mein HTMLWenn Kontrollkästchen geprüft AngularJS mit ng-repeat

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

Hier mein Controller ist:

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

});`

Es gibt dieses:

pro Bestellung Ich möchte True False wissen, wenn einer der Bestellartikel überprüft wurde, so dass ich dann ein Einreichen zeigen kann b utton.

Auf den Kontrollkästchen habe ich versucht ng-repeat und ng-model mit bisher keinem Erfolg.

Quelle

2017-06-06 MikeeeGeee

können Sie eine Probe json Ausgabe einzufügen, die Sie von WooCommerce bekommen aare – Satya

Ich fühle mich der WooCommerce json Daten irrelevant ist. Ich brauche nur etwas in der Steuerung, um zu wissen, ob eines der Kontrollkästchen überhaupt aktiviert ist, und wenn ja, dann zeige eine Schaltfläche an. – MikeeeGeee

Nur wenn wir die Daten betrachten, die Sie Ihrer Auftragsvariablen zuweisen, können wir versuchen, zu helfen – Satya

Erstellen Sie eine Richtlinie/Komponente für jede Bestellposition, sodass Sie den Umfang jeder Bestellung isolieren können. Überprüfen Sie dann die Änderungen für jeden Artikel.

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>

Quelle

2017-06-06 16:01:44 Hoyen

Wenn Kontrollkästchen geprüft AngularJS mit ng-repeat

Antwort

Verwandte Themen