javascript - AngularJS - 动态设置选择默认值的多重选择

Question

使用 AngularJS 分别在下拉列表中为每个产品及其目录信息编写代码:

<ul style="height:250px;" >
<li data-ng-repeat="product in products" >
<div> {{SelectedOption.Price}} </div>
<select  data-ng-model="SelectedOption"  data-ng-init="SelectedOption=Catalogues[0]" data-ng-options="Catalogue as Catalogue.CName for Catalogue in Catalogues | filter:{ProductId:product.ProductId}:true" >                             
</select>
</li>
</ul>

Controller 代码是这样的

 var app = angular.module('myApp', []);
 app.controller('myControl', function ($scope) {
 $scope.products = [{ productname: 'Rice1', ProductId: 1}, { productname: 'Rice2', ProductId: 2 },{ productname: 'Rice3', ProductId: 3 }];    
 $scope.Catalogues = [{ ProductId: 1, CatalogueId: 1, CName: '25KG Bag', Price: 500, sortorder: 1 }, { ProductId: 1, CatalogueId: 2, CName: '50KG Bag', Price: 1000, sortorder: 2 },{ ProductId: 2, CatalogueId: 3, CName: '100KG Bag', Price: 1800, sortorder: 2 }];

现在想要使用选择下拉列表的第一个值动态设置每个产品目录.cname 的默认值，有什么想法吗？非常感谢!

http://plnkr.co/edit/9MYrj1YJt7HzLR9FGDqD?p=preview

Plnkr 结果希望为第二个下拉菜单设置“100KG Bag”

Answer 1

要在选择中设置默认值，您需要将 ng-model 设置为您正在使用的列表中的第一个。将其放在 Controller 的末尾:

 $scope.SelectedOption = $scope.Catalogues[0];