ng-model 无法在 html 上显示数组 json 值

Question

对于自动完成 texbox，我使用的是 ngTagInput。建议也随之而来。

当我尝试显示data-ng-model（假设名称为“列表”）值时，我正在执行以下操作：{{list}}，然后它会正确显示。

如果我选择“list1”，则显示如下：

[{"listId":1,"listName":"list1"}]

但是当我尝试只显示 listId 时：{{list.listId}}，它没有显示任何内容，甚至没有显示 {{list.listName}}

请帮帮我

谢谢。

这是我的html：

<tags-input ng-model="list" display-property="listName" on-tag-added="getlists()" >
     <auto-complete source="loadlists($query)"></auto-complete>
</tags-input>
<p>Id is: {{list.listId}}</p><br>
<p>Name is {{list.listName}}</p>

</tags-input>

这是我的 js：-

$scope.loadTags = function(query) {
    return $http.get('resources/json/tags.json');
};

$scope.getlists = function(){
    //not implemented
};

这里{{list}} 是：-

[{"listId":2,"listName":"Tag2"}]

我的 json 是：-

[
    { "listId": 1, "listName": "list1" },
    { "listId": 2, "listName": "list2" },
    { "listId": 3, "listName": "list3" },

Answer 1

由于 JSON 是一个数组，您需要以如下方式访问它：

list[0].listId 和 list[0].listName

查看 plunkr：“http://plnkr.co/edit/yRwvyfXUwNibCuNOHuZU?p=preview”