javascript - 使用预定义值更新 ng-repeat 中的选择列表

Question

我在 ng-repeat 中有选择列表列。我在每个重复中也有复选框列。假设我有一个预定义的税值，应将其更新为我已检查的行的选择列表项。

我怎样才能实现这个目标？在选择列表中使用 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%"}
			]
		 },
		{ name: "Product #2", description: "A product",
		category: "Category #1", price: 110, isChecked:false,
		taxList: [
			{label: "Vat 20%"},
			{label: "Vat 30%"},
			{label: "Vat 40%"}
			]
		 },
		{ name: "Product #3", description: "A product",
		category: "Category #2", price: 210, isChecked:false,
		taxList: [
			{label: "Vat 20%"},
			{label: "Vat 30%"},
			{label: "Vat 40%"}
			]
		 },
		{ name: "Product #4", description: "A product",
		category: "Category #3", price: 202, isChecked:false,
		taxList: [
			{label: "Vat 20%"},
			{label: "Vat 30%"},
			{label: "Vat 40%"}
			]
		 }]
	};

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

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

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

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

Answer 1

selectedTax 位于父范围内，因此对于每个产品来说都是相同的。将 selectedTax 键添加到每个项目对象并使用 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>