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

Question

Angular 初学者。

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

我想将整个列表绑定(bind)到一个标签。换句话说: <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}} 时，您可以通过两种方式绑定(bind)整个变量，而该变量恰好是一个数组，因此它会这样显示。你可以这样做

{{list1[0]}}

如果你想得到同样想要的效果

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

The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.

因此它将替换您与该值绑定(bind)的任何内容的文本内容，因为您有一个字符串数组，所以它会提取该字符串。

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

第一个 {{}} 表达式仅打印整个对象，第二个表达式通过索引指定数组中的项目，第三个表达式将数组中的每个项目打印为文本(逗号分隔)

如果您的变量是像

这样的字符串，请添加最后一条注释

$scope.list1 = "list1"

然后你会在 ng-bind 和 {{}} 之间得到相同的效果