Angularjs ui-select标记不起作用

时间:2014-12-01 09:59:43

标签: javascript angularjs select tags ui-select

情况:

我有一个发送电子邮件的角度应用。
有三个字段:地址 - 主题 - 文本。
地址字段使用角度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

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


问题:

如何在角度ui-select中正确插入新值?

2 个答案:

答案 0 :(得分:2)

使用0.8.2的掠夺者。标记适用于0.8.3。

答案 1 :(得分:1)

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

  1. 只需将类或ID添加到ui-select标记即可。
  2. 在角度控制器中添加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;
        }
    });