使用多个选项在角度 md-select 中设置所选项目 [英] Setting selected item in angular md-select with multiple option

查看:34
本文介绍了使用多个选项在角度 md-select 中设置所选项目的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在具有多个选项的角度 md-select 中设置所选项目

<md-option ng-repeat="role in roles" value="{{role.value}}" ng-selected="{{ role.value === '<%= data.roles %>'? 'true' : 'false' }}">{{ role.name }}</md-选择>

<块引用>

在我的控制器中

 $scope.roles = [{"name": "帐户管理员",值":account_admin"}, {"name": "开发商",价值":开发商"},{"name": "分析师",价值":分析师"}];

<块引用>

在视图中

data.roles 包含值:

['account_admin', '开发者']

我需要role.value对应的项目应该处于选中状态.

参考下图

解决方案

最后我找到了解决方案,在我的控制器中我写了这个:

var current_roles = '<%=data.roles%>';//来自数据库的当前值作为数组$scope.Reg.roles = [];//初始化数组angular.forEach($scope.roles, function(val1, key1) {if(current_roles.indexOf(val1['value']) !== -1)//检查当前数组中的项目是否存在{$scope.Reg.roles.push(val1['value']);//设置选择项目}});

Setting selected item in angular md-select with multiple option

<md-select multiple ng-model="Reg.roles" placeholder="Please select roles" required>
    <md-option ng-repeat="role in roles" value="{{role.value}}" ng-selected="{{ role.value === '<%= data.roles %>' ? 'true' : 'false' }}">{{ role.name }}</md-option>
</md-select>

in my controller

 $scope.roles = [{
        "name": "Account Admin",
        "value": "account_admin"
    }, {
        "name": "Developer",
        "value": "developer"
    },


    {
        "name": "Analyst",
        "value": "analyst"
    }
];

in view

data.roles contains value:

['account_admin', 'developer']

I need the item corresponding to role.value should be in selected state.

Refer below image

解决方案

Finally i found the solution, in my controller i wrote this:

var current_roles       = '<%=data.roles%>'; // current value from db as array

$scope.Reg.roles = []; //initialize array

angular.forEach($scope.roles, function(val1, key1) {
    if(current_roles.indexOf(val1['value']) !== -1) // check if item in current array
    {
        $scope.Reg.roles.push(val1['value']); //setting to select items
    }
});

这篇关于使用多个选项在角度 md-select 中设置所选项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆