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

Posted 2023-03-05

【中文标题】ng-model 无法在 html 上显示数组 json 值

【英文标题】：Not Able to display array json values on html by ng-model

【发布时间】：2015-10-04 02:02:00

【问题描述】：

对于自动完成 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" ,

【参考方案1】：

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

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

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

【讨论】：

但是用户可以从自动完成标签中选择任何列表。我的意思是如果假设用户想要添加 10 个列表作为标签，那么它只会将零索引值绑定到模型..

根据您的问题，我刚刚向您提供了您所犯错误的方法，最终您将不得不决定逻辑，这需要是一个全新的问题。跨度>