如何傳遞后端數據以顯示為多選下拉菜單項（已附加Jsfiddle）

Question

這是參考小提琴鏈接->> 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個名稱。

Answer 1

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;
    });
});