Angularjs ui-select标记不起作用答案

【问题标题】：Angularjs ui-select tagging not workingAngularjs ui-select标记不起作用
【发布时间】：2014-12-01 09:59:43
【问题描述】：

情况：

我有一个发送电子邮件的 Angular 应用程序。
共有三个字段：地址 - 主题 - 文本。
地址字段是使用角度构建的ui-select

电子邮件地址可以从列表中选择，也可以重新输入。
问题是我无法创建新条目。

在文档中写道，为了输入新值，可以使用属性tagging。

但我不知道为什么，不和我一起工作。

代码：

（简单的新标签添加示例）

<ui-select multiple tagging tagging-label="(custom 'new' label)" ng-model="multipleDemo.colors" theme="bootstrap" ng-disabled="disabled" style="width: 300px;">

    <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>

    <ui-select-choices repeat="color in availableColors | filter:$select.search">
        {{color}}
    </ui-select-choices>

</ui-select>

$scope.availableColors = ['Red','Green','Blue','Yellow','Magenta','Maroon','Umbra','Turquoise'];
$scope.multipleDemo = {};
$scope.multipleDemo.colors = ['Blue','Red'];

PLUNKER：

http://plnkr.co/edit/T55LeKK66Idb3lD8DDPz?p=preview

如您所见，无法插入新值。

问题：

如何在 angular ui-select 中正确插入新值？

【问题讨论】：

你好 :) 没错，我希望能够创建一种新颜色
我删除了我的答案并查看了其中一个官方示例，但它似乎不起作用。我在第一个 ui-select 中添加了一个标记属性，然后输入文本后跟 Enter 或“，”不会将文本添加为标记。 plnkr.co/edit/EbeqFz3e7fwShtXlbXeN?p=preview
感谢您的努力。奇怪不？它应该按照文档中的说明工作

标签： javascript angularjs select tags ui-select

【解决方案1】：

给出的 plunker 使用 0.8.2。标记适用于 0.8.3。

【讨论】：

天哪！谢谢！

【解决方案2】：

你可以通过 jQuery 的一些技巧来做到这一点——

只需将 class 或 id 添加到 ui-select 标记。

在 Angular 控制器中通过 id 和 class 添加访问权限，如下所示：

<ui-select reset-search-input="true" ng-model="myModel.SerialNumber" theme="bootstrap"
        ng-required="true" name="SerialNumber" class="YourClass" Id="YourId">
    <ui-select-match placeholder=" {{'VehicleMaster.SerialNumber'| translate}}">
        {{$select.selected.SerialNumber}}    
    </ui-select-match>
    <ui-select-choices repeat="item in IMEISerialsDropDown | filter: $select.search">
        <div ng-bind-html="item.SerialNumber"></div>
    </ui-select-choices>
</ui-select>

$(".YourClass").find("input.ui-select-search").on("focusout", function (val) {
    var variable = $(".YourClass").find("input.ui-select-search").val();
    if (variable .length > 0 && variable .length != null) {
        var variableJson = {
                    SerialNumber: variable ,
                };
                $scope.myModel.ModelProperty= variableJson;
    }
});

【讨论】：