Angularjs：使用没有ng-options的selectbox绑定复杂对象

发布时间：2020-12-17 17:18:25 所属栏目：安全来源：网络整理

导读：我需要通过选择框绑定复杂的对象. 我知道ng-options,但我不能在ng-options中使用模板表达式.我需要将displaytext的字段添加到我的控制器中的每个对象,如this fiddle.这意味着我需要更改演示文稿的逻辑/代码.这是一个令人担忧的分离. 有没有办法用不使用ng-op

我需要通过选择框绑定复杂的对象.

我知道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],因为value属性中有插值.

解决方法

使用带有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];
}

http://jsfiddle.net/XzfVZ/3/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!