Question

初学者角色。

我有一个列表，list1 = ["item1"]。

我想将整个列表绑定到标签上。换一种说法： <label> {{list1}} </label>。这将输出["item1"]。它看起来很俗气，所以我尝试使用ng-bind。 <label ng-bind = "list1"> </label>。这未能显示任何输出（空白标签）。 为什么这不起作用？

第二次尝试，我做了<label ng-bind = "list1[0]">。这工作!!的为什么吗

现在，我想尝试使用ng-model。 <label ng-model = "list1"> </label>。不工作。然后我尝试了，<label ng-model = "list1[0]">。没有运气......唉！ 我无法理解这个场景。

我尝试找到ng-bind和ng-model之间的区别。 Found this here。如果答案有效，为什么 <label ng-bind = "list1"> </label> 不等于 <label> {{list1}} </label>？

Answer 1

当你执行{{list1}}时，你是两种方式绑定整个变量，这恰好是一个数组，所以它显示它。你可以做到

{{list1[0]}}

如果你想获得相同的预期效果

对于ng-bind - 来自文档本身

ngBind属性告诉Angular将指定HTML元素的文本内容替换为给定表达式的值，并在该表达式的值更改时更新文本内容。

因此，它将替换与值绑定的任何内容的文本内容，因为你有一个字符串数组，它会拉出字符串。

点击此处查看示例 - http://jsfiddle.net/U3pVM/16563/

第一个{{}}表达式只打印整个对象，第二个按索引指定数组中的项目，第三个表达式将数组中的每个项目打印为文本（逗号分隔）

如果您的变量是

之类的字符串，只需添加最后一条评论

$scope.list1 = "list1"

然后你会在ng-bind和{{}}

之间产生相同的效果

AngularJs：列表未显示在ng-Bind或ng-model中

1 个答案: