使用ui-jq预选不适用于下拉选项

时间:2016-04-27 16:09:58

标签: javascript angularjs

ng-model的值是简单的数值数组:[8]

HTML代码

                    <select ui-jq="chosen" multiple="true" class="w-md" name="careers" id="careers" ng-model="loan_plan.careers" ng-options="opt.id as opt.id for opt in careersOptions" >
                    </select>

选项是对象数组

[
{
id: 10,
name: "statistician",
description: "Food truck artisan 3 wolf moon tilde. Franzen aesthetic you probably haven't heard of them ennui tumblr. Fingerstache distillery ugh. Meggings you probably haven't heard of them lomo. Mixtape jean shorts pbr&b twee chillwave authentic trust fund."
},
{
id: 9,
name: "engineer",
description: "Wes anderson polaroid jean shorts meggings etsy roof listicle 90's. Tote bag plaid green juice. Microdosing 8-bit austin migas."
},
{
id: 8,
name: "police officer123434",
description: "Tattooed vinyl jean shorts irony. Iphone wolf kinfolk austin venmo semiotics authentic slow-carb. Farm-to-table poutine letterpress asymmetrical hammock microdosing. 3 wolf moon viral offal portland."
}
]

正如您所见,在加载页面之前已经存在数字8

但它未在文本字段中选择

inline

inline

1 个答案:

答案 0 :(得分:0)

试试这个。你应该用对象初始化模型。

var app = angular.module("testApp", []);
app.controller('testCtrl', function($scope){
  $scope.loan_plan ={careers:[]};
  $scope.careersOptions = [
{
id: 10,
name: "statistician",
description: "Food truck artisan 3 wolf moon tilde. Franzen aesthetic you probably haven't heard of them ennui tumblr. Fingerstache distillery ugh. Meggings you probably haven't heard of them lomo. Mixtape jean shorts pbr&b twee chillwave authentic trust fund."
},
{
id: 9,
name: "engineer",
description: "Wes anderson polaroid jean shorts meggings etsy roof listicle 90's. Tote bag plaid green juice. Microdosing 8-bit austin migas."
},
{
id: 8,
name: "police officer123434",
description: "Tattooed vinyl jean shorts irony. Iphone wolf kinfolk austin venmo semiotics authentic slow-carb. Farm-to-table poutine letterpress asymmetrical hammock microdosing. 3 wolf moon viral offal portland."
}
];
  
  $scope.loan_plan.careers= $scope.careersOptions[2];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">

       <select ui-jq="chosen" multiple class="w-md" name="careers" id="careers" ng-model="loan_plan.careers" ng-options="opt.id as opt.id for opt in careersOptions" >
                    </select>
</div>