【问题标题】:Dropdown with textbox using ui-select in angular js在angular js中使用ui-select的文本框下拉
【发布时间】:2018-11-09 11:17:17
【问题描述】:

我正在寻找 angularJS 中带有文本框的下拉菜单。目前我正在使用标签。我也有过滤条件。不确定如何保存用户输入的值。

      <span>
            <ui-select
            ng-model="ele.test"
            theme="selectize"
            class="form-select-control select-dropdown-fixed-position"
            style="width:16em;text-align:left"
            name="test"
            ng-change="someEvent(ele)"
            ng-model-options="{ updateOn : 'default blur' }">
                <ui-select-match
                    placeholder="Test">{{$select.selected}}</ui-select-match>
                    <ui-select-choices
                            repeat="test in testList| filter: $select.search">
                        <span ng-bind-html="test | highlight: $select.search"></span>
                    </ui-select-choices>
            </ui-select>
        </span>

如果用户输入的值不是下拉列表中列出的值,我必须保存它。我尝试过使用标签,但它不起作用。

感谢任何帮助。

【问题讨论】:

    标签: angularjs


    【解决方案1】:

    您可以使用 $scope.ele.test 的值保存它,该值保存输入文本的值。

    var myVal = $scope.ele.test;

    【讨论】:

    • 您好,感谢您的回复。 ele.test 值为空值。在下拉列表中输入内容并单击外部后,该值正在消失。我尝试了 reset-search-input 但没有用。
    【解决方案2】:

    我正在寻找允许用户在下拉列表中输入,如果用户输入的值不在列表中,则保存它。我在这里找到了以下解决方案。Allow manually entered text in ui-select

       <ui-select ng-model="superhero.selected">
       <ui-select-match placeholder="Select or search a superhero ..."> 
           {{$select.selected}}</ui-select-match>
       <ui-select-choices repeat="hero in getSuperheroes($select.search) 
             |filter: $select.search">
           <div ng-bind="hero"></div>
       </ui-select-choices>
       </ui-select>
    

    在控制器中

       $scope.getSuperheroes = function(search) {
        var newSupes = $scope.superheroes.slice();
        if (search && newSupes.indexOf(search) === -1) {
        newSupes.unshift(search);
       }
       return newSupes;
       }
    

    【讨论】:

      猜你喜欢
      • 2016-01-02
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-01-02
      • 1970-01-01
      • 2012-02-14
      • 1970-01-01
      • 2014-12-31
      相关资源
      最近更新 更多