而是取消选择angularjs ng-option空白选项

时间:2015-12-14 20:40:14

标签: javascript angularjs ng-options

我在选择元素中显示预选值作为选定选项时遇到问题。这里是代码

<select ng-model="data.company" ng-options="company as company.name for company in companies"></select>


$scope.companies =[{
    id:1,
    name:"Company 1"
},
{
    id:2,
    name:"Company 2"
}];

$scope.data = {
    company:{
        id:2,
        name:"Company 2"
    }
}

问题在于,当我输入该部分时,选择为我提供了一个空白选项,默认为向我显示&#34;公司2&#34;。我做错了什么?

3 个答案:

答案 0 :(得分:1)

在这种情况下,您需要使用track by,因为您要直接将对象值分配给ng-model。在这种情况下,当您将对象直接绑定到data.company(ng-model)轨道时,通过表达式检查ng-model中带有每个companies元素id的company.id。如果任何人匹配,则预先选择该输入。

<强>标记

<select ng-model="data.company" 
   ng-options="company as company.name for company in companies track by company.id">
</select>

Demo Plunkr

答案 1 :(得分:0)

试试这个

 <select ng-model="data.company" ng-options="company.name for company in companies"></select>

  $scope.data = {
      company: $scope.companies[1];
  };

您希望下拉列表中显示的值为公司名称,并将对象存储为公司。

答案 2 :(得分:0)

您可以尝试使用ng-init

<select ng-init="data.company= companies[0]" 
        ng-model="data.company" 
        ng-options="company as company.name for company in companies"></select>