angular select选项没有选中,即使设置了默认值

22 浏览
0 Comments

angular select选项没有选中,即使设置了默认值

我已经有了与该特定选择框关联的模型的现有值,并且我有不同的源列表来渲染选项,在这种情况下,我无法将选择框的默认值设置为初始状态。

HTML:



SCRIPT:

angular.module('app', [])
.controller('SampleCtrl', function($scope) {
  vm = this;
  vm.list = [{
    "id":1
    ,"name":"sdfgg"
    ,"website":"dfgdg"
    ,"is_active":"1"
    ,"is_deleted":"1"
  }, {
    "id":2
    ,"name":"sfd"
    ,"website":"sdfsdf"
    ,"is_active":"1"
    ,"is_deleted":"0"
  }, {
    "id":3
    ,"name":"sfs"
    ,"website":"dfsdfs"
    ,"is_active":"0"
    ,"is_deleted":"0"
  }];
  vm.new_object = {
    "name": "some thing"
    ,"provider_id": 2
  }
})

这是解决同样问题的演示 plnkr 链接。如果有任何想法,请帮助我解决这个问题。

0
0 Comments

问题的原因是因为在select元素中使用了ng-repeat而不是正确的ng-options指令。ng-repeat指令不能正确地设置默认选项。解决方法是改用ng-options指令,并使用ng-model指定默认选项的值。

以下是解决问题的代码示例:


在上面的示例中,ng-options指令将遍历vm.list数组,并将每个元素的id属性作为选项的值,name属性作为选项的显示文本。

如果需要在没有预定义值时显示一个默认选项,可以在ng-options指令中添加一个空值选项。例如:


上述代码将在select元素中添加一个值为空的默认选项,并将其文本显示为"--请选择--"。

另外,如果需要根据is_active标志进行筛选,可以在ng-options指令中添加一个过滤器。例如:


上述代码将只显示is_active为true的选项。

您可以在plunkr示例中查看更新后的代码。

0