35

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>
4

5 に答える 5

46

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

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 ソリューションです。

于 2015-10-02T19:32:29.910 に答える
13

ユーザーが新しいエントリを作成できるようにする方法を見つけたと思います。「on-select」属性を使用して、以下のように $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

于 2015-06-18T01:15:39.833 に答える
8

ドキュメントで説明されているように、タグ付け属性を 使用できます: 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>
于 2015-04-07T13:12:12.073 に答える
4

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>

プランカーはこちら

私のプル リクエストが angular-ui チームによって受け入れられるまで、私のパッチを含む ui-select ビルドを自分のレポで取得できます。

于 2016-06-14T07:17:31.313 に答える