![](/img/trans.png)
[英]How to pass multiple items for onselect event for ng-multiselect-dropdown
[英]How to pass backend data to display as multiselect dropdown items (Jsfiddle attached)
这是参考小提琴链接->> https://jsfiddle.net/etfLssg4/
正如您在小提琴中看到的那样,用户可以选择多个下拉项。 下拉值是在初始化期间选择的。 Lisa和Danny是选择的默认项目。 它会显示在下拉栏中,如小提琴所示。
默认值是由这一行代码设置的。
$scope.example13model = [items[2], items[4]];
现在情况如下。 后端数据通过字符串传递到前端。 如下
David,Danny
这意味着应该在下拉菜单中显示David和Danny。 目前是“ Lisa,Danny”
这里是对这种情况的解释。 从服务器端获取David,Danny之后,它将与项目列表进行比较。 从该列表中可以知道,David是数字0,Danny是列表第4。
列表如下。 (如小提琴所示)
var items = [{
id: 1,
label: "David"
}, {
id: 2,
label: "Jhon"
}, {
id: 3,
label: "Lisa"
}, {
id: 4,
label: "Nicole"
}, {
id: 5,
label: "Danny"
}];
一旦知道了编号,该代码便会显示此代码行选择的项目列表。
$scope.example13model = [items[0], items[4]];
有人可以让我知道如何动态地实现这一目标。 例如 如果来自后端的字符串仅包含“ lisa”,则它应在下拉列表中显示Lisa。
如果从后端以字符串形式传递了3个名称,则应该能够在下拉列表中显示这3个名称。
var items = [{
id: 1,
label: "David"
}, {
id: 2,
label: "Jhon"
}, {
id: 3,
label: "Lisa"
}, {
id: 4,
label: "Nicole"
}, {
id: 5,
label: "Danny"
}];
var backendSelection = "David,Lisa";
var selectedLabels = backendSelection.split(",");
$scope.example13model = items.
filter(function(item) {
// if the the label property of the current item
// is found in selectedLabels, return true (i.e. allow the current item
// to pass through the filter) otherwise false.
return selectedLabels.some(function(label) {
// whenever the following expression evaluates to true,
// the current item will be selected.
return label === item.label;
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.