0

REST から取得した次のデータ構造があります。

scope.taglist =

[ { 名前: "mylist", タグ: ["tag1", "tag2", "tag3", ...]}, { 名前: "mylist2", タグ: ["tag2.1", "tag2.2" , "tag2.3", ...]} ]

オブジェクトの名前を表示するために、次の html があります。

<div>
<select ng-model="tagNameSelection">
<option ng-repeat="tagObj in taglist" value="{{tagObj}}">{{tagObj.name}}</option>
</select>
</div>

<div class="tagdetails">
<!-- present the list of tags from tagNameSelection -->
</div>

ここで、個々のオブジェクトのタグ リストを表示する方法が少しわかりません。(tagdetails div 内に {{tagNameSelection}} を貼り付けることにより) 生の形式で配列を表示できますが、ng-repeat angular を使用して配列を反復しようとすると、エラー メッセージが表示されます。

奇妙なことに、タグ リストの 1 つをコントローラーのスコープにハードコーディングすると、ng-repeat は問題なく動作します。

4

1 に答える 1

1

たぶん、次のような興味深いものがあります：

HTML

<div ng-controller="fessCntrl">
    <div>
        <select ng-model="tagNameSelection"            
         ng-options="tagObj as tagObj.name for tagObj in taglist"              
         ng-change="change(tagNameSelection)"></select>
    </div>

    <pre>{{tagNameSelection.tags|json}}</pre>

    <div class="tagdetails"> 
        <ul ng-repeat="tag in tagNameSelection.tags">
            <li>{{tag}}</li>
        </ul>    
    </div>
</div>

コントローラ

var fessmodule = angular.module('myModule', []);

fessmodule.controller('fessCntrl', function ($scope) {



    $scope.change = function (value) {
    };

    $scope.taglist = [{
        name: "mylist",
        tags: ["tag1", "tag2", "tag3"]
    }, {
        name: "mylist2",
        tags: ["tag2.1", "tag2.2", "tag2.3"]
    }]

});

fessmodule.$inject = ['$scope'];

見るFiddle

于 2013-10-06T18:28:31.293 に答える