data-ng-bind不适用于 <option>元件

Question

I've just started learning angular and got stuck on this problem. 我刚刚开始学习角度问题，并陷入了这个问题。 I read on AngularJS : Why ng-bind is better than {{}} in angular? 我在AngularJS上阅读过：为什么ng-bind在角度上比{{}}好？ that {{}} and ng-bind will give you the same outcome. {{}}和ng-bind会给您相同的结果。 However, it is not the case for the codes below: 但是，以下代码不是这种情况：

JS JS

(function () {
    angular
        .module("myApp", [])
        .controller("selectCtrl2", function ($scope, $http) {
            $http({
                method: "GET",
                url: "http://localhost/testService/name.php"
            })
            .then(function (response) {$scope.names = response.data.content;},
             function (response) {$scope.names = response.statusText;});
        });
})();

HTML 的HTML

<body data-ng-app="myApp">
    <div data-ng-controller="selectCtrl2">
        <select>
            <option data-ng-repeat="x in names">
                <span data-ng-bind="x"></span>
            </option>
        </select>
    </div>
</body>

ng-repeat actually created 3 option tags, but their innerHTML were spaces only. ng-repeat实际上创建了3个选项标签，但它们的innerHTML仅是空格。 For some weird reasons, if I used {{x}}, their innerHTML would be filled with the text in an array I prepared [a, b, c]. 出于某些奇怪的原因，如果我使用{{x}}，则它们的innerHTML将以我准备的数组[a，b，c]中的文本填充。 I wonder what could be the reason. 我想知道可能是什么原因。

Answer 1

It is illegal HTML to have a <span> element inside <option> elements.The only permitted content is text. 在<option>元素中包含<span>元素是非法的HTML。唯一允许的内容是文本。

Move the ng-bind directive to the <option> element and it will work. 将ng-bind指令移至<option>元素，它将起作用。

The Demo 演示

 <script src="//unpkg.com/angular/angular.js"></script> <body ng-app> <div ng-init="names=['fred','sam','jane']"> <select> <!-- ILLEGAL HTML <option data-ng-repeat="x in names"> <span data-ng-bind="x"></span> </option> --> <!-- PERMITTED --> <option data-ng-repeat="x in names" ng-bind="x"> </option> </select> </div> </body>

With the ng-bind directive as part of the <option> element , the directive will insert only the text result of the Angular Expression which is legal HTML and permitted content. 将ng-bind指令作为<option>元素的一部分，该指令将仅插入Angular Expression的文本结果，该结果是合法的HTML和允许的内容。

From the MDN Docs: 从MDN文档中：

The HTML <option> element is used to define an item contained in a <select> , an <optgroup> , or a <datalist> element. HTML <option>元素用于定义<select> ， <optgroup>或<optgroup> <datalist>元素中包含的项目。 As such, can represent menu items in popups and other lists of items in an HTML document. 这样，可以表示弹出菜单中的菜单项以及HTML文档中的其他项列表。
 Content categories None. Permitted content Text, possibly with escaped characters (like `&eacute;`). 
— MDN HTML Element Reference - <option> — MDN HTML元素参考- <option>

Also see, 另请参阅

AngularJS select Directive API Reference - Using ngRepeat to generate select options AngularJS select指令API参考-使用ngRepeat生成select选项

Answer 2

From the answer by Konstantin Krass : 从Konstantin Krass的答案中：

This ng-bind is a directive and will place a watcher on the passed variable. 此ng-bind是指令，它将在传递的变量上放置观察者。 So the ng-bind will only apply, when the passed value does actually change . 因此ng-bind仅在传递的值确实发生更改时才适用。

The brackets on the other hand will be dirty checked and refreshed in every $digest , even if it's not necessary . 另一方面，即使没有必要 ，括号也会在每个 $digest 进行检查和刷新。 ¹ ^1个

UPDATE: 更新：

the main reason is solved in the answer by georgeawg 主要原因是由georgeawg解决的

¹ _{https://stackoverflow.com/a/23382400/1575353} ¹ _{https://stackoverflow.com/a/23382400/1575353}

data-ng-bind不适用于 <option>元件

问题描述

2 个解决方案

解决方案1
2 已采纳 2017-06-11 23:45:12

The Demo 演示

解决方案2
0 2017-06-11 19:52:15

UPDATE: 更新：

data-ng-bind不适用于 <option>元件

问题描述

2 个解决方案

解决方案1 2 已采纳 2017-06-11 23:45:12

The Demo 演示

解决方案2 0 2017-06-11 19:52:15

UPDATE: 更新：

解决方案1
2 已采纳 2017-06-11 23:45:12

解决方案2
0 2017-06-11 19:52:15