angularjs 尝试在我的选择选项中显示值

3phpmpom  于 2022-11-21  发布在  Angular
关注(0)|答案(1)|浏览(141)

当我试图显示我的值时,选择框总是空的。值是整数0 1 2 3。在这种情况下,它应该显示0,但框是空的。我做错了什么?vmDialog.dataModel.requestType值等于整数0,但不显示。

<select class="form-control " name="requestType" ng-model="vmDialog.dataModel.requestType">
                  <option value=0>0</option>
                  <option value="{{0}}">0</option>
                  <option value="0">0</option>
                </select>
n9vozmp4

n9vozmp41#

首先,有一个简单的HTML问题,您需要确保每个选项都有唯一的值,到目前为止,您对所有选项都使用了值0,因此当requestType的值为0时,UI无法选择应选择的项。
如果该值假定为0,1,2,3之一,则您需要确保存在一个具有相应value的选项可供选择。

  • 您可能要做的是将选项绑定到视图模型中的数组:
// on vmDialog
var requestTypeOptions = [
  { name = 'Zero', value = 0 },
  { name = 'One', value = 1 },
  { name = 'Two', value = 2 },
  { name = 'Three', value = 3 },
];

然后在查看:(使用ng-options

<select class="form-control"
        name="requestType" 
        ng-model="vmDialog.dataModel.requestType" 
        ng-options="o.value as o.name for o in vmDialog.requestTypeOptions track by o.value | orderby: 'value'" 
        class="form-control input-sm">
</select>

下面是对ng-options的一个很好的描述:https://stackoverflow.com/a/30507651/1690217
如果您需要自定义模板,也可以使用ng-repeat:

<select class="form-control " name="requestType" ng-model="vmDialog.dataModel.requestType">
    <md-option ng-value="o.value" ng-repeat="oin vmDialog.requestTypeOptions | orderBy: 'value'">{{o.name}}</md-option>
</select>

相关问题