javascript - IE8 上的 Angular，在选择元素中显示数据无法正常工作

Question

我尝试用角度构造一个公式，但在选择元素中显示数据不起作用......

公式.cs.html：

    <table style="display: inline-block; float: left; max-width: 510px;">
        <tr data-ng-repeat="question in group.questions">
            <td>{{question.name}}</td>
            <td>
                 <div ng-switch on="question.control" style="display: inline-block;">
                     <div ng-switch-when="input">
                          <input type="text" style="width: {{ question.size }};" data-isnull="{{question.isnull}}" name="{{question.dbcolumn}}" id="{{question.dbcolumn}}" placeholder="{{question.default_value}}" maxlength="{{question.max_length}}" />
                     </div>
                     <div ng-switch-when="textarea">
                      <textarea style="width: {{ question.size }};" data-isnull="{{question.isnull}}" name="{{question.dbcolumn}}" id="{{question.dbcolumn}}" placeholder="{{question.default_value}}"></textarea>
                     </div>
                     <div ng-switch-when="checkbox">
                          <input type="checkbox" data-isnull="{{question.isnull}}" name="{{question.dbcolumn}}" id="{{question.dbcolumn}}" />{{question.default_value}}
                     </div>
                     //MY PROBLEM HERE !
                     <div ng-switch-when="select">
                          <select style="width: {{ question.size }};" data-isnull="{{question.isnull}}" name="{{question.dbcolumn}}" id="{{question.dbcolumn}}">
                                                <option ng-repeat="choice in question.default_value" value="{{choice.value}}">{{choice.name}}</option>
                          </select>
    
                          <select style="width: {{ question.size }};" data-isnull="{{question.isnull}}" name="{{question.dbcolumn}}" id="{{question.dbcolumn}}" ng-model="question" ng-options="choice.value for choice in question.default_value">
                          </select>
    
                      </div>
                      <div ng-switch-when="p">
                           <p style="width: {{ question.size }};" data-isnull="{{question.isnull}}" name="{{question.dbcolumn}}" id="{{question.dbcolumn}}"><b>{{question.default_value}}</b></p>
                      </div>
                      <div ng-switch-default>
                           <!-- default action -->
                      </div>
                  </div>
             </td>
             <td>
                  <div ng-if="question.unity_variable == true">
                       <select>
                           <option ng-repeat="unit in question.unity">{{unit.value}}</option>
                       </select>
                  </div>
                  <div ng-if="!question.unity_variable">
                       {{question.unity}}
                  </div>
             </td>
        </tr>
   </table>

我看过使用 AngularJS，如何将 <select> 元素绑定到通过服务更新的属性

在我的浏览器中，会显示标签，但不会显示选择中的选项。

在左侧，方法：

<select style="width: {{ question.size }};" data-isnull="{{question.isnull}}" name="{{question.dbcolumn}}" id="{{question.dbcolumn}}" ng-model="question" ng-options="choice.value for choice in question.default_value">
</select>

右边，方法：

<select style="width: {{ question.size }};" data-isnull="{{question.isnull}}" name="{{question.dbcolumn}}" id="{{question.dbcolumn}}">
      <option ng-repeat="choice in question.default_value" value="{{choice.value}}">{{choice.name}}</option>
</select>

你能帮我找出我的错误吗？谢谢

Answer 1

不要ng-repeat与select/option. 此处描述的正确用法是：

<select ng-model="form.question"
    ng-options="choice.value as choice.name for choice in question.default_value">
</select>

为了正确显示所选选项，choice.value零件必须等于ng-model（在前面的示例中form.question）定义的值。我不知道你的型号，让我们考虑一下：

question.default_value = [
    {name: "Alpha", value: "a"},
    {name: "Beta",  value: "b"}
];

如果form.question === "a"，则选择第一个选项；如果form.question === "b"是第二个，以此类推。您可以选择整个对象：

<select ng-model="form.question"
    ng-options="choice.name for choice in question.default_value">
</select>

在这种情况下，初始化form.question为：

form.question = question.default_value[0];
// the index, in this example 0, is that of the selected element

在这种情况下，对象必须等于===; 他们的属性匹配是不够的。