这是参考小提琴链接 -->> https://jsfiddle.net/etfLssg4/
正如您在小提琴中看到的那样,用户可以选择多个下拉项。在初始化期间已选择下拉列表值。丽莎和丹尼是默认选择的项目。它显示在下拉栏中,如小提琴所示。
默认值由此代码行设置。
$scope.example13model = [items[2], items[4]];
现在场景如下。后端数据通过字符串传递到前端。具体如下
David,Danny
这意味着大卫和丹尼应该显示在下拉菜单中。目前是"丽莎,丹尼"
以下是对这种情况应该如何发生的解释。一旦我们从服务器端得到大卫,丹尼,它将与项目列表进行比较。从这份名单中,人们会知道大卫是第 0 名,丹尼是名单的第 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;
});
});