9

状況：

私は ui-select を使用しなければならない角度のあるアプリを作成しています: ユーザー情報ページで、選択で 1 つまたは複数のタグを選択できるようにする必要があります。既存のタグを取得して表示するのに問題があるという事実を除けば、ほとんど機能しています。

コード：

意見： 

<ui-select multiple ng-model="info_data.tags" theme="bootstrap" ng-disabled="disabled">

  <ui-select-match placeholder="Select tag...">{{$item.name}} </ui-select-match>

  <ui-select-choices repeat="tag in all_tags | propsFilter: {name: $select.search}">

    {{tag.name}}

  </ui-select-choices>

</ui-select>

<p>Selected: {{info_data.tags}}</p>

コントローラ：

$http({

    url: base_url + 'main/db_get_all_tags',
    method: "POST",

 }).success(function (data) {

    $scope.all_tags = data;

});

$scope.show_info = function() {

    var result_info = DbService.get_info( $stateParams.db_data_id );

    result_info.then( function( data )
    {
        $scope.info_data = data;

    });

};

試行 1:

非常に奇妙な動作が発生します。ユーザーの情報ページにタグが表示されず、ui-select にも表示されません。5/6 回更新する場合を除いて、突然魔法のように機能し、ユーザー情報ページと ui-select にタグが表示されます。どちらの場合も、機能していても機能していなくても、同じ種類のエラーメッセージがいくつか表示されます。

未定義のプロパティ '長さ' を読み取ることができません。

試行 2:

この問題を解決するために、コントローラーに次のコードを追加しました。

$scope.info_data = { tags: [] };
$scope. all_tags = [];

そして、エラーメッセージはもう表示されません。アプリは安定しており、ユーザー情報ページに適切なタグが表示されます。唯一の問題は、タグが ui-select に読み込まれないことです。

新しいタグを選択すると正常に動作しますが、既存のタグが失われます。

質問:

ui-select を適切に機能させるにはどうすればよいですか? (現在 v0.8.3) コンフリクトの問題はありますか?

サーバーから既存のデータを正しく呼び出すにはどうすればよいですか?

どうもありがとうございました！

4

3 に答える 3

41

表示されているエラーについて特に説明していないため、以下が役立つかどうかわかりません..

デモ用に作成したカスタム フィルターであるpropsFilterフィルターを使用しているため、例として ui-select デモ コードを使用するときに最初に問題がありました。

<ui-select-choices repeat="tag in all_tags | propsFilter: {name: $select.search}">

問題が発生している理由である可能性があるコードにこのフィルターを含めていないと思います。angularの通常のフィルターを使用して解決できます：

<ui-select-choices repeat="tag in all_tags | filter: {name: $select.search}">

または、フィルタリングするプロパティが複数ある場合は、AND ではなく OR でフィルタリングする propsFilter フィルタを記述できます。「filter」を使用して複数のプロパティをフィルタリングすると、すべてのプロパティで検索値を一致させようとします。

app.filter('propsFilter', function() {
  return function(items, props) {
            var out = [];
                if (angular.isArray(items)) {
                  items.forEach(function(item) {
                        var itemMatches = false;

                        var keys = Object.keys(props);
                        for (var i = 0; i < keys.length; i++) {
                              var prop = keys[i];
                              var text = props[prop].toLowerCase();
                              if (item[prop].toString().toLowerCase().indexOf(text) !== -1) {
                                    itemMatches = true;
                                    break;
                                  }
                            }

                            if (itemMatches) {
                              out.push(item);
                            }
                      });
                } else {
                  // Let the output be the input untouched
                      out = items;
                }

                return out;
          };
    });

ここでフィルターを含むコミットを確認できます: https://github.com/angular-ui/ui-select/commit/3fac88cfad0ad2369c567142eadba52bdb7998b1

ただし、特定のフィルタリング要件がある場合は、最適なパフォーマンスを確保するために独自のフィルターを作成することをお勧めします。

于 2014-11-16T14:57:03.853 に答える
3

Select2#4.0 の前の状況がどのようなものだったかはわかりませんが、Select2#4.0 なしで使用するのはそれほど難しくありませんangular-ui-select(依存関係が 1 つ少なくなります) 。

select2bower の依存関係に含めてlink、ディレクティブ内の関数で使用するだけです。

.directive('someDirective', function() {
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            element.find('.your-select2').select2({
                theme: 'classic',
                placeholder: 'Select a placeholder...',
                allowClear: true,
                data: [{ id: 'New', text: 'New'}]...
            });
        },
    };
})

そしてあなたのHTML：

<select class="your-select2" ng-model="a.model.field"></select>

data必要に応じて、サービスを介してコントローラーから をロードし、を使用しscopeて設定することもできます!

私が使ってみたときにこれを言うのは、 angular-ui-select「ねえ、それはAngularだ、プラグインを使わなければならない!」と思ったからですが、いつもそうであるとは限りません:)。さらに、ドキュメントはあまり役に立たないことがわかりました（怠け者と呼んでください）

于 2015-07-23T20:23:04.420 に答える