使用 angularjs 为多选下拉列表分配默认值
Assign default value to multiselect dropdown using angularjs
我正在使用这个插件http://dotansimha.github.io/angularjs-dropdown-multiselect/#/
如果您查看此页面中的演示部分,请使用我正在使用的“智能按钮文本”演示。
在此演示中,如果您 select 任何用户,这些名称将显示在栏中。
现在,我想给它默认值。因此,一旦页面加载,此 multiselect 下拉列表中就会出现一个默认值。
一般情况下,我可以使用ng-init。在这种情况下我该怎么办?
有人可以在这里阐明一下......
您是否尝试过使用控制器中的默认值初始化模型?像这样:
$scope.example13model = [{"id": 1}]
我在看文档
我认为,
$scope.example1data = new Array({id: 1, label: "David"}, {id: 2, label: "Jhon"}, {id: 3, label: "Danny"});
$scope.example1model = new Array();
//elements that we want to checked
$scope.example1model.push( $scope.example1data[0])
$scope.example1model.push( $scope.example1data[1))
我用的是同一个库。
以下对我有用:
<div ng-dropdown-multiselect options="data.options" selected-model="data.preselected"></div>
$scope.data = {
options: [
{id: 1, label: 'one'},
{id: 2, label: 'two'},
{id: 3, label: 'three'},
{id: 4, label: 'four'}
],
preselected: [
{id: 2, label: 'two'},
{id: 3, label: 'three'}
]
};
编辑:
这里正在工作Plunker
我很确定您没有 lodash.js
可用。
只需将 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.0.0/lodash.js"></script>
添加到您的 html.
这里有一个 fiddle 可以实现您想要实现的目标:https://jsfiddle.net/etfLssg4/
fiddle 的详细摘要如下:
var items = [{
id: 1,
label: "David"
}, {
id: 2,
label: "Jhon"
}, {
id: 3,
label: "Lisa"
}, {
id: 4,
label: "Nicole"
}, {
id: 5,
label: "Danny"
}];
$scope.example13data = items;
// here we set the default selections as 'Lisa' and 'Danny'.
// The point you had missed is that both selection array and options array
// should have elements with matching references.
$scope.example13model = [items[2], items[4]];
$scope.example13settings = {
smartButtonMaxItems: 3,
smartButtonTextConverter: function(itemText, originalItem) {
if (itemText === 'Jhon') {
return 'Jhonny!';
}
return itemText;
}
};
如果按以下方式设置默认选择(正如您可能所做的那样):
$scope.example13model = [{
id: 3,
label: "Lisa"
}, {
id: 5,
label: "Danny"
}];
这是行不通的,因为,例如,以下比较结果为假:
items[2] === { id: 3, label: "Lisa" }; // false!
回答你的问题 -
wat if i need to update the dropdown with values i get from a ajax
call. for e.g. after ajax call, i get a response in an object stating
id 3 is to be selected. how do i bind the response to the dropdown and
let the user see the updated value
?
问题的解决方法如下:
var items = [/* as before, this is the list of base options */];
...
...
var dataFromAjax = [/* data here */];
var selection = items.filter(function(item){
// check if the item matches any one in the ajax data
return dataFromAjax.some(function(dataItem){
// assuming the `id` property is unique
return item.id === dataItem.id;
});
});
// at this point `selection` is an array with elements that are references to selected option items.
我正在使用这个插件http://dotansimha.github.io/angularjs-dropdown-multiselect/#/
如果您查看此页面中的演示部分,请使用我正在使用的“智能按钮文本”演示。
在此演示中,如果您 select 任何用户,这些名称将显示在栏中。
现在,我想给它默认值。因此,一旦页面加载,此 multiselect 下拉列表中就会出现一个默认值。
一般情况下,我可以使用ng-init。在这种情况下我该怎么办?
有人可以在这里阐明一下......
您是否尝试过使用控制器中的默认值初始化模型?像这样:
$scope.example13model = [{"id": 1}]
我在看文档
我认为,
$scope.example1data = new Array({id: 1, label: "David"}, {id: 2, label: "Jhon"}, {id: 3, label: "Danny"});
$scope.example1model = new Array();
//elements that we want to checked
$scope.example1model.push( $scope.example1data[0])
$scope.example1model.push( $scope.example1data[1))
我用的是同一个库。 以下对我有用:
<div ng-dropdown-multiselect options="data.options" selected-model="data.preselected"></div>
$scope.data = {
options: [
{id: 1, label: 'one'},
{id: 2, label: 'two'},
{id: 3, label: 'three'},
{id: 4, label: 'four'}
],
preselected: [
{id: 2, label: 'two'},
{id: 3, label: 'three'}
]
};
编辑:
这里正在工作Plunker
我很确定您没有 lodash.js
可用。
只需将 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.0.0/lodash.js"></script>
添加到您的 html.
这里有一个 fiddle 可以实现您想要实现的目标:https://jsfiddle.net/etfLssg4/
fiddle 的详细摘要如下:
var items = [{
id: 1,
label: "David"
}, {
id: 2,
label: "Jhon"
}, {
id: 3,
label: "Lisa"
}, {
id: 4,
label: "Nicole"
}, {
id: 5,
label: "Danny"
}];
$scope.example13data = items;
// here we set the default selections as 'Lisa' and 'Danny'.
// The point you had missed is that both selection array and options array
// should have elements with matching references.
$scope.example13model = [items[2], items[4]];
$scope.example13settings = {
smartButtonMaxItems: 3,
smartButtonTextConverter: function(itemText, originalItem) {
if (itemText === 'Jhon') {
return 'Jhonny!';
}
return itemText;
}
};
如果按以下方式设置默认选择(正如您可能所做的那样):
$scope.example13model = [{
id: 3,
label: "Lisa"
}, {
id: 5,
label: "Danny"
}];
这是行不通的,因为,例如,以下比较结果为假:
items[2] === { id: 3, label: "Lisa" }; // false!
回答你的问题 -
wat if i need to update the dropdown with values i get from a ajax call. for e.g. after ajax call, i get a response in an object stating id 3 is to be selected. how do i bind the response to the dropdown and let the user see the updated value
?
问题的解决方法如下:
var items = [/* as before, this is the list of base options */];
...
...
var dataFromAjax = [/* data here */];
var selection = items.filter(function(item){
// check if the item matches any one in the ajax data
return dataFromAjax.some(function(dataItem){
// assuming the `id` property is unique
return item.id === dataItem.id;
});
});
// at this point `selection` is an array with elements that are references to selected option items.