如何通过后端数据显示为多选下拉项（附的jsfiddle） [英] How to pass backend data to display as multiselect dropdown items (Jsfiddle attached)

问题描述

这是参照小提琴链接 - >> https://jsfiddle.net/etfLssg4/

正如你可以在小提琴看到，用户可以选择多个下拉项目。的下拉值已在初始化期间被选择。丽莎和丹尼都选择了默认项。如图拨弄它就会在下拉栏中显示。

默认值由该行code的设定。

  $ scope.example13model = [项目[2]，项目[4];
 

现在的情况如下。
后端数据通过字符串传递到前端。它是如下

 大卫·丹尼
 

这意味着大卫和丹尼应在下拉菜单显示。目前，它是丽莎，丹尼

本应是如何发生的继承人的交代。一旦我们从服务器端获取大卫，丹尼，它将与项目的列表进行比较。从该列表，它会知道大卫是数字0和丹尼是列表的第4位。

的列表如下。 （如图小提琴）

  VAR项目= [{
    ID：1，
    标签：大卫
}，{
    ID：2，
    标签：为Jhon
}，{
    ID：3，
    标签：丽莎
}，{
    ID：4，
    标签：妮可
}，{
    ID：5，
    标签：丹尼
}];
 

一旦知道数量，code便会显示该行code的选定项目清单。

  $ scope.example13model = [项目[0]，项目[4];
 

有人可以让我知道如何动态地实现这一目标。对于如。如果从后端字符串只包含丽莎，它应该在下拉列表显示丽莎。

如果有3名来自后端字符串传递，它应该能够在下拉列表中显示的名字3。

解决方案

  VAR项目= [{
    ID：1，
    标签：大卫
}，{
    ID：2，
    标签：为Jhon
}，{
    ID：3，
    标签：丽莎
}，{
    ID：4，
    标签：妮可
}，{
    ID：5，
    标签：丹尼
}];
VAR backendSelection =大卫，丽莎;
变种selectedLabels = backendSelection.split（，）;$ scope.example13model =项目。
过滤器（功能（项）{
    //如果当前项目的标签属性
    //在selectedLabels被找到，返回真（即允许当前项目
    //通过过滤器），否则为false。
    返回selectedLabels.some（函数（标签）{
        //每当下面前pression值为true，
        //当前项将被选中。
        返回标签=== item.label;
    }）;
}）;
 

This is with reference to fiddle link -->> https://jsfiddle.net/etfLssg4/

As you can see in the fiddle, user can select multiple dropdown items. The dropdown values have been selected during initialization. Lisa and Danny are the default items selected. it gets displayed at the dropdown bar as shown in fiddle.

The default values is set by this line of code.

$scope.example13model = [items[2], items[4]];

Now the scenario is as follows. The backend data is passed to front end via string. it is as follows

David,Danny

It means David and Danny should be displayed at dropdown. Currently it is "Lisa,Danny"

Heres the explaination of how this should happen. Once we get David,Danny from server side, it will compare with the list of items. From that list, it will come to know that David is number 0 and Danny is 4th of the list.

The list is as follows. (as shown in fiddle)

var items = [{
    id: 1,
    label: "David"
}, {
    id: 2,
    label: "Jhon"
}, {
    id: 3,
    label: "Lisa"
}, {
    id: 4,
    label: "Nicole"
}, {
    id: 5,
    label: "Danny"
}];

Once it knows the number, the code will then display the list of items selected by this line of code.

$scope.example13model = [items[0], items[4]];

Can someone let me know how to achieve this dynamically. for eg. if string from backend contains only 'lisa', it should display Lisa at the dropdown.

If there are 3 names passed as string from backend, it should be able to show those 3 names at dropdown.

解决方案

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

这篇关于如何通过后端数据显示为多选下拉项（附的jsfiddle）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！