4

選択ボックスを介して複雑なオブジェクトをバインドする必要があります。

ng-optionsは知っていますが、ng-options でテンプレート式を使用できません。この fiddleのように、コントローラー内のすべてのオブジェクトに displaytext を含むフィールドを追加する必要があります。つまり、プレゼンテーションのロジック/コードを変更する必要があります。これは懸念事項の不適切な分離です。

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>

現在、これは string をバインドしています。これ[object Object]は、value 属性の補間のためです。

4

1 に答える 1

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];
}

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

于 2013-09-26T19:36:35.287 に答える