无法将数据绑定到angularjs中的下拉列表多选
Unable to bind data to dropdown-multiselect in angularjs
请检查跳跃器。我无法像这样绑定来自服务器的数据(["Monday","Tuesday"])
.
我知道数据在像
$scope.selectedUser = [{ id: 2, name: 'Monday' },
{id: 3,name:'Tuesday'}];.
我想在javascript中[{ id: 2, name: 'Monday' },{id: 3,name:'Tuesday'}]
["Monday","Tuesday"]
,以便它在下拉列表中绑定。
请帮我解决这个问题。
演示普伦克
//This is the ng filter to create id as you get the data from server
app.filter('createId',function(){
return function(arr){
var result = [];
for(var i = 0;i < arr.length;i++){
var id = arr[i].substring(0,3);
var obj = {'id':id,'name':arr[i]};
result.push(obj);
}
return result;
}
});
//In js controller you can costomize your array of user by using ng-filter like this
$scope.users = $filter('createId')($scope.users);
//This is because index will be changed every time so this can't be used as ID
$scope.selectedUser = $filter('createId')($scope.selectedUser);
使用以下代码实现您的 json
。var temp = ["Monday", "Tuesday"]
var result = "[";
for (var i = 0; i < temp.length; i++) {
if(i!=temp.length-1)
{
result += "{id:'" + i + "',name:'" + temp[i] + "'},";
}
else
{
result += "{id:'" + i + "',name:'" + temp[i] + "'}";
}
alert(result);
}
console.log(result+"]")
你可以这样做
$scope.selectedUsers=[];
//serverData is data from server
for(var i =0 ; i < serverData.length ; i++){
$scope.selectedUsers.push({id:i , name: serverData[i]})
}
在你的角度
$scope.doSelectedUser = function () {
$scope.selectedUser = $scope.selectedUsers;
}
$scope.selectedUser
应该引用$scope.users
中的实际对象。 例如,这是我必须在您的 plunker 中更改的内容,以将其与用户匹配用户名列表绑定:
var defaultSelectedUsers = ["Sunday","Tuesday"];
$scope.users = [
{ id: 1, name: 'Sunday' },
{ id: 2, name: 'Monday' },
{ id: 3, name: 'Tuesday' } ];
$scope.selectedUser = $scope.users.filter(function(user){
return defaultSelectedUsers.indexOf(user.name) != -1;
});
在线演示 - http://plnkr.co/edit/3TOkZEaZVSxtpNbFaNkg?p=preview
您提到要从服务器的响应中执行此操作。 目前还不清楚您希望如何决定选择哪一个,假设您依赖于根据示例按名称选择的默认用户。
以下是处理服务器响应和修改新选定用户的方式:
var defaultSelectedUsers = ["Sunday","Tuesday"];
$http.get('/api/v1/users')
.success(function(users)){
$scope.users = users;
$scope.selectedUser = users.filter(function(user){
return defaultSelectedUsers.indexOf(user.name) != -1;
});
});
您可以将筛选条件更改为对您有意义的条件
相关文章:
- AngularJS下拉列表未显示所选值
- 使用angularJs中的数据库数据源刷新下拉列表
- 如何使用Python/Selenium网络驱动程序处理Angularjs/Javascript下拉列表
- angularjs文本区域-如何使其与angularjs下拉列表中的选定值保持同步
- AngularJS:使用ng-show/hide动态维护下拉列表的3种状态(InProgress、Success、Err
- 通过使用AngularJs进行分组来填充下拉列表
- 如何在x-editable angularjs的select下拉列表中获得所选值
- 保持元素处于禁用状态,直到未在 Angularjs 中选择下拉列表
- 用angularjs填充引导程序下拉列表
- 从angularjs中的下拉列表中删除未定义的值
- 如何在AngularJS中显示基于两个下拉列表的内容
- 使用AngularJS更新下拉列表
- AngularJS通过点击按钮检测下拉列表是否已更改
- AngularJS Dependent下拉列表,带ng repeat
- 如何使用AngularJS链接下拉列表
- 级联下拉列表angularjs
- 如何禁用AngularJS中的下拉列表项
- 在AngularJS中动态填充下拉列表
- AngularJS下拉列表在选择项目后丢失内容
- 从 Angularjs 中的辅助下拉列表中获取值