Aktualisiere Auswahllisten in ng-repeat mit dem vordefinierten Wert

Question

Ich habe eine Auswahlliste in ng-repeat.Ich habe auch eine Checkbox-Spalte in jeder Wiederholung. Angenommen, ich habe einen vordefinierten Steuerwert, der auf die Auswahllistenelemente für die Zeilen, die ich überprüft habe, aktualisiert werden soll.

Wie kann ich das erreichen? Wenn ng-model in der Auswahlliste verwendet wird, werden alle Elemente aktualisiert, d. H. Die vollständige Spalte anstelle der ausgewählten Zeilen.

Hier ist der Code.

\t $scope.data = { 
 
\t \t products: [ 
 
\t \t { name: "Product #1", description: "A product", 
 
\t \t category: "Category #1", price: 100, isChecked:false, 
 
\t \t taxList: [ 
 
\t \t \t {label: "Vat 20%"}, 
 
\t \t \t {label: "Vat 30%"}, 
 
\t \t \t {label: "Vat 40%"} 
 
\t \t \t ] 
 
\t \t }, 
 
\t \t { name: "Product #2", description: "A product", 
 
\t \t category: "Category #1", price: 110, isChecked:false, 
 
\t \t taxList: [ 
 
\t \t \t {label: "Vat 20%"}, 
 
\t \t \t {label: "Vat 30%"}, 
 
\t \t \t {label: "Vat 40%"} 
 
\t \t \t ] 
 
\t \t }, 
 
\t \t { name: "Product #3", description: "A product", 
 
\t \t category: "Category #2", price: 210, isChecked:false, 
 
\t \t taxList: [ 
 
\t \t \t {label: "Vat 20%"}, 
 
\t \t \t {label: "Vat 30%"}, 
 
\t \t \t {label: "Vat 40%"} 
 
\t \t \t ] 
 
\t \t }, 
 
\t \t { name: "Product #4", description: "A product", 
 
\t \t category: "Category #3", price: 202, isChecked:false, 
 
\t \t taxList: [ 
 
\t \t \t {label: "Vat 20%"}, 
 
\t \t \t {label: "Vat 30%"}, 
 
\t \t \t {label: "Vat 40%"} 
 
\t \t \t ] 
 
\t \t }] 
 
\t }; 
 

 
\t angular.forEach($scope.data.products, function(product){ 
 
\t \t product.taxList.unshift({label: "Select Tax"}); 
 
\t \t $scope.selectedTax = product.taxList[0].label; 
 
\t }); 
 

 
\t $scope.updateListTax = function(){ 
 
\t \t $scope.preDefinedTax = "Vat 40%"; 
 
\t \t angular.forEach($scope.data.products, function(product){ 
 
\t \t \t if(product.isChecked){ 
 
\t \t \t \t $scope.selectedTax = $scope.preDefinedTax; 
 
\t \t \t } 
 
\t \t }); 
 
\t }

ul,li{ 
 
\t list-style:none; 
 
} 
 
.group:after{ 
 
\t content: ''; 
 
\t display: table; 
 
\t clear: both; 
 
}

<div class="col-sm-12"> 
 
\t \t \t \t <section> 
 
\t \t \t \t \t <div class="group"> 
 
\t \t \t \t \t \t <div class="col-sm-6"><strong>Product Details</strong></div> 
 
\t \t \t \t \t \t <div class="col-sm-6"><strong>Tax</strong></div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <ul> 
 
\t \t \t \t \t \t <li ng-repeat="item in data.products" class="row"> 
 
\t \t \t \t \t \t \t <div class="col-sm-6"> 
 
\t \t \t \t \t \t \t \t <span class="col-sm-1"> 
 
\t \t \t \t \t \t \t \t \t <input type="checkbox" ng-model="item.isChecked"> 
 
\t \t \t \t \t \t \t \t </span> 
 
\t \t \t \t \t \t \t \t <span class="col-sm-11">{{item.name}}</span> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-sm-6"> 
 
\t \t \t \t \t \t \t \t <select ng-options="tax.label as tax.label for tax in item.taxList" ng-model="selectedTax"></select> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t \t <button ng-click="updateListTax()" class="btn btn-default">save</button> 
 
\t \t \t \t </section>

Answer 1

Verwenden ng-model="item.isChecked$index" dies einen separaten Rahmen Variable für jede Option in der ng-repeat erstellen.

Answer 2

Der selectedTax befindet sich im übergeordneten Bereich und ist daher für jedes Produkt gleich. Fügen Sie jedem item-Objekt einen selectedTax-Schlüssel hinzu und verwenden Sie ng-model.

$scope.data = { 
    products: [ 
     { name: "Product #1", description: "A product", 
     category: "Category #1", price: 100, isChecked:false, 
     taxList: [ 
      {label: "Vat 20%"}, 
      {label: "Vat 30%"}, 
      {label: "Vat 40%"} 
      ] 
     }, 
     selectedTax: null 
     ... 
angular.forEach($scope.data.products, function(product){ 
    product.taxList.unshift({label: "Select Tax"}); 
    product.selectedTax = product.taxList[0].label; 
}); 

$scope.updateListTax = function(){ 
    $scope.preDefinedTax = "Vat 40%"; 
    angular.forEach($scope.data.products, function(product){ 
     if(product.isChecked){ 
      product.selectedTax = $scope.preDefinedTax; 
     } 
    }); 
} 

HTML

<select ng-options="tax.label as tax.label for tax in item.taxList" ng-model="item.selectedTax"></select>