angular select选项没有选中,即使设置了默认值
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 链接。如果有任何想法,请帮助我解决这个问题。
问题的原因是因为在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示例中查看更新后的代码。