angular-UI select2 不能在同一控制器中使用 select2Options 进行多个输入

angular-ui select2 can not have multiple input with select2Options in same controller

本文关键字：select2Options 输入 不能 select2 控制器 angular-UI      更新时间：2023-09-26

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

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

您需要使用 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
    };
}
相关文章：