web-dev-qa-db-ja.com

ui-selectに手動で入力したテキストを許可する

Ui-selectの選択ボックスを使用しています。すべて正常に機能していますが、手動で入力したテキストを許可し、リストで使用可能な値からユーザーを制限したくないです。テキストを入力すると、リストが正しくフィルタリングされます。しかし、要素をクリックせずに次のフィールドに移動すると、テキストは破棄されます。

何か案は？

ありがとう、アレックス

コードが正しくないと思うので、コードを表示したくありませんでしたが、要求されました。

<ui-select ng-model="formData[field.id].selected" theme="bootstrap">
    <ui-select-match placeholder="{{ lists[field.id].placeholder }}">{{$select.selected.text}}</ui-select-match>
    <ui-select-choices repeat="item in lists[field.id].list | filter: $select.search">
        <div ng-bind-html="item.text | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

データはformData[field.id].selectedに保存されます。 field.idは、表示する現在のフィールドの番号です（フォームを動的に生成しています）。一意のint値が格納されていると仮定してください。

編集08.04.2015 私の解決策： C＃コンボボックスに相当するものがないかのように見えることがわかりました。そこで、先に進み、2つの別々のフィールドを使用しました。それは私が望んでいたものではありませんが、今のところ動作します：

<ui-select ng-model="formData[field.id].selected" theme="bootstrap">
    <ui-select-match placeholder="{{ lists[field.id].placeholder }}">{{$select.selected.text}}</ui-select-match>
    <ui-select-choices repeat="item in lists[field.id].list | filter: $select.search">
        <div ng-bind-html="item.text | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>
<?php echo __('Create a new element if value is not in list'); ?>
<div class="input-group">
    <span class="input-group-addon">
        <input type="checkbox" ng-model="disabled[field.id]">
    </span>
    <input type="text" value="" ng-disabled="!disabled[field.id]" class="form-control" ng-model="formData[field.id].newValue" />
</div>
angularjsui-select
31
AlexWerz

ここに解決策があります：

HTML-

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

CodePenソリューション です。

43
silverArc

ユーザーが新しいエントリを作成できるようにする方法を見つけたと思います。 「選択時」属性を使用して、以下のようにパラメーターとして$ selectを受け取る関数を渡します。

<ui-select ng-model="person.selected"
      theme="select2"
      on-select="peopleSel($select)"
      tagging
      reset-search-input="false"
      >

    <ui-select-match placeholder="Enter a name...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="sel in people | filter: {name: $select.search}">
    <div ng-bind-html="sel.name | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>

次に、clickTriggeredSelect変数がfalseのときに新しいエントリを追加する関数を作成します。

$scope.peopleSel= function(sel) {
  if ( sel.search && ! sel.clickTriggeredSelect ) {
    if ( ! sel.selected || sel.selected.name != sel.search ) {
      //Search for an existing entry for the given name
      var newOne= personSearch( sel.search ); 
      if ( newOne === null ) {
        //Create a new entry since one does not exist
        newOne= { name: sel.search, email: 'none', country: 'unknown' };
        $scope.people.Push( newOne );
      }
      //Make the found or created entry the selected one
      sel.selected= newOne;
    }
  }
  sel.search= ''; //optional clearing of search pattern
};

PersonSearch定義はここでは提供されないことに注意してください。また、clickTriggeredSelectをテストするこのアプローチを使用して、空のエントリが優先される場合にユーザーがフィールドの選択を解除できるようにすることもできます。

PVC

13
Paul Van Camp

ドキュメントで説明されているように、tagging属性を使用できます： https://github.com/angular-ui/ui-select/ wiki/ui-select

<ui-select multiple tagging tagging-label="(custom 'new' label)" ng-model="multipleDemo.colors">
...
</ui-select>
8
rave

Allow-free-text属性を介してこの機能を許可するために、ui-selectプロジェクトをフォークしました

<ui-select allow-free-text="true" ng-model="ctrl.freeTextDemo.color2" theme="bootstrap" style="width: 800px;" title="Choose a color">
    <ui-select-match placeholder="Select color...">{{$select.selected}}</ui-select-match>
    <ui-select-choices repeat="color in ctrl.availableColors | filter: $select.search">
      <div ng-bind-html="color | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

これは plnker です

プルリクエストがangle-uiチームによって受け入れられるまで、 my own repo にパッチを含むui-selectビルドを取得できます

4
Anthony Hocquet

keyupを使用して、入力したテキストを表す新しいオプションを追加します。このアプローチでは、ユーザーがenterを押すと、これまでに入力したものを選択できます（デフォルトのアクティブなアイテムは最初のアイテムです）。

これは、データリストにプレーンテキストまたはオブジェクト（属性value-prop 必要とされている）。

指令：

commonApp.directive("uiSelectFreeText", function () {
    return {
        restrict: "A",
        require: "uiSelect",
        link: function (scope, element, attrs, $select) {
            var searchInput = element.querySelectorAll("input.ui-select-search");

            if (searchInput.length !== 1) {
                console.log("Error! Input not found.");
                return;
            }

            searchInput.on("keyup", function () {
                var valueProp = attrs["valueProp"];
                var addNewObjOption = function () {
                    // add new item represent free text option
                    var newOption = { isFreeText: true };
                    newOption[valueProp] = $select.search;
                    $select.items.unshift(newOption);
                };

                if ($select.items.length > 0) {
                    var firstItem = $select.items[0];

                    if (valueProp) {
                        // items is list of Object
                        if (firstItem.isFreeText) {
                            firstItem[valueProp] = $select.search;
                        } else {
                            addNewObjOption();
                        }
                    } else {
                        // items is list of string
                        if (firstItem === $select.search) {
                            return;
                        } else {
                            $select.items.Push($select.search);
                        }
                    }
                } else {
                    if (valueProp) {
                        addNewObjOption();
                    } else {
                        // items is list of string
                        $select.items.Push($select.search);
                    }
                }
            });
        }
    };
});

HTML：

<ui-select class="ui-select-control"
           ui-select-free-text value-prop="Label"
           ng-model="keyword">
</ui-select>
0
Hp93