javascript - angular-ui select2 在同一个控制器中不能有多个输入与 select2Options

Question

我正在使用来自https://github.com/angular-ui/ui-select2的 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
};

 }

如您所见，上面的代码会将两个输入框转换为 select2 输入框，但两个输入框都将包含产品数据。我想要装满书签的书签输入框和带有产品的产品输入框。

Answer 1

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

尝试

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

}