Javascript 角度ui select2不能在同一控制器中具有多个select2选项的输入

我正在使用select2 from

//我在一个控制器中有两个input select2框
//在控制器中，我有书签和产品的列表，我正在尝试下面的内容，但它不起作用，两个输入框都以相同的数据结束，即产品。
函数MyCtrl（$scope）{
var书签=[
{id:0，文本：“增强”}，
{id:1，文本：“bug”}，
{id:2，文本：“重复”}，
{id:3，文本：“无效”}，
{id:4，文本：“wontfix”}
];
$scope.select2选项={
多重：对，
宽度：“300px”，
数据：书签
};
var乘积=[
{id:0，文本：“Product1”}，
{id:1，文本：“Product2”}，
{id:2，文本：“Product3”}，
{id:3，文本：“Product4”}，
{id:4，文本：“Product5”}
];
$scope.select2选项={
多重：对，
宽度：“300px”，
数据：产品
};
}

---

如上所述，代码将两个输入框转换为select2输入框，但两个框都有产品数据。我希望书签输入框中填充书签，产品输入框中填充产品。

您需要使用两个单独的范围属性来存储书签和产品的选项。在您的情况下，产品选项也会覆盖书签选项，因为两者使用相同的属性

试一试

// I have two input select2 box inside one controller
<form ng-controller="MyCtrl">
<input
type="text"
ui-select2="select2Options"
ng-model="bookmarks"
>
<input
type="text"
ui-select2="select2Options"
ng-model="products"
>
</form>
//In controller I have list of bookmarks and products I am trying something like below but     it is not working and both the input box ended up with same data i.e. products.
function MyCtrl($scope){
var bookmarks=[
    {id:0,text:"enhancement"},
    {id:1,text:"bug"},
    {id:2,text:"duplicate"},
    {id:3,text:"invalid"},
    {id:4,text:"wontfix"}
    ];
$scope.select2Options = {
    multiple: true,
    width: "300px",
    data:bookmarks
};
var products=[
    {id:0,text:"Product1"},
    {id:1,text:"Product2"},
    {id:2,text:"Product3"},
    {id:3,text:"Product4"},
    {id:4,text:"Product5"}
    ];

$scope.select2Options = {
    multiple: true,
    width: "300px",
    data:products
};

 }

<form ng-controller="MyCtrl">
    <input type="text" ui-select2="bookmarksSelect2Options" ng-model="bookmarks">
    <input type="text" ui-select2="productsSelect2Options" ng-model="products">
</form>

function MyCtrl($scope) {
    var bookmarks = [{
        id: 0,
        text: "enhancement"
    }, {
        id: 1,
        text: "bug"
    }, {
        id: 2,
        text: "duplicate"
    }, {
        id: 3,
        text: "invalid"
    }, {
        id: 4,
        text: "wontfix"
    }];
    $scope.bookmarksSelect2Options = {
        multiple: true,
        width: "300px",
        data: bookmarks
    };
    var products = [{
        id: 0,
        text: "Product1"
    }, {
        id: 1,
        text: "Product2"
    }, {
        id: 2,
        text: "Product3"
    }, {
        id: 3,
        text: "Product4"
    }, {
        id: 4,
        text: "Product5"
    }];

    $scope.productsSelect2Options = {
        multiple: true,
        width: "300px",
        data: products
    };

}