我需要通过选择框绑定复杂对象。
我知道ng-options ,但我无法在ng-options中使用模板表达式。我需要将displaytext的字段添加到控制器中的每个对象,如this fiddle。这意味着我需要更改演示文稿的逻辑/代码。 这是一个很糟糕的问题。
有没有办法使用ng-options将复杂对象与选择框不绑定?我需要在模板中编写displaytext声明,如:
<select name="myObject" ng-model="myObject.sub">
<option ng-selected="!myObject.sub.id"></option>
<option value="" translate="myObject.sub.self" ng-selected="myObject.sub.id == -1">
<option ng-repeat="option in subselect.data" value="{{option}}" ng-selected="option.id == myObject.sub.id">
{{option.id}} {{option.shortName}} {{ option.comment }}
</option>
</select>
目前这是绑定字符串[object Object]
,因为值属性中插值。
答案 0 :(得分:5)
使用ng-change
的小辅助函数,您可以捕获所选项目的索引以获取完整对象。
HTML
<label ng-controller="CompanyController" for="ci-company_sid">
Company:
<select ng-model="selectedCompanyIndex" ng-change="update(companysData.companys)">
<option ng-repeat="c in companysData.companys" value="{{$index}}" ng-selected="c.company.sid == selectedCompany.company.sid">{{c.company.company_name}} - {{c.company.link}}</option>
</select>
<hr>
{{selectedCompany.company.link}}
</label>
控制器:
function CompanyController($scope, $http) {
$scope.companysData = {
"companys": [{
"company": {
"link": "\/company\/8256606980000143017",
"sid": "8256606980000143017",
"company_name": "Company 29"
}},
{
"company": {
"link": "\/company\/8256603960000178016",
"sid": "8256603960000178016",
"company_name": "Company 1"
}}]
}
$scope.update = function(dataSet){
$scope.selectedCompany = dataSet[$scope.selectedCompanyIndex];
}
$scope.selectedCompany = $scope.companysData.companys[0];
}