0

でui-select、オプションを選択すると、on-selectコールバックは起動しますが、オプションは毎回クリアされません。

ui-select には 2 つの状態があります。

  1. ボタン - 実際にクリックしていない場合
  2. 入力 - クリックすると検索できます

起動すると、ボタンにプレースホルダー テキスト「検索...」が表示されます。それをクリックして検索を開始すると、リストが表示されます。1 つのオプションを選択すると起動しon-select、ng-model.

それでも、私が選択するたびng-modelに、コールバックのクリアが無視されます。

<ui-select ng-model="result.selected" theme="bootstrap" class="search" on-select="searchselect($item)" reset-search-input="true" on-select="selected($item)">
    <ui-select-match placeholder="Search...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices refresh="search({val:$select.search})" refresh-delay="300" repeat="item in results">
        <div ng-bind="item.name"></div>
    </ui-select-choices>
</ui-select>

これが私のon-selectコードです：

  $scope.selected = function(item) {
     $scope.picked = item;
     $scope.result.selected = "";
  };

基本的なui-select例の plunkr を複製して修正しました: http://plnkr.co/edit/16DRYH8MbPJOy0GpogZz?p=preview

  1. 選択をクリックします
  2. テキストを検索すると、「123」が最も簡単だと思います
  3. 選択肢一つを選択してください
  4. ng-modelがクリアされていることを確認します
  5. 再検索
  6. 別のオプションを選択するか、同じオプションを選択してください
  7. ng-modelがクリアされていないことを確認します

ここに画像があります。

イニシャル：

イニシャル

検索中:

選択する

選択後（2つおき）-これは私の問題です

問題を選択した後

2回目の選択ごとにボタンの最後の画像でクリアされないのはなぜですか?

4

1 に答える 1

0

遅くなりましたが、役立つかもしれません。ui-select での angular-digest サイクルの不適切な実装と関係があると思います。angular ドキュメントのスコープ ライフサイクルを参照してください。

それで、あなたはそれについて何ができますか：

  • angular は安全なダイジェスト サイクルですべてを自動的にラップするため、selected-callback で行うスコープのすべての変更を $timeout でラップします。例：

    $scope.selected = function(item) {
  $timeout(function(){
    $scope.picked = item;
    $scope.result.selected = "";
  }); 
};

  • コールバック関数の代わりに $watch 式を使用します。

    $scope.$watch('result.selected', function(newVal){
  if(newVal !== ''){
    $scope.picked = newVal;
    $scope.result.selected = '';
  }
});

完全なダイジェスト サイクルをトリガーしないため、後者の方が効率的だと思います。(しかし、私は角度のある内部構造の専門家ではありません。)

于 2015-02-04T09:38:28.123 に答える