0

最近、私はWebアプリに取り組んでおり、1<select>年の各日に1つの要素が必要です。

だから私はこのようなことをしました。ここで、daysOfYearは1年のすべての日のavailableValues配列であり、はすべての可能な値の配列です。

<div ng-repeat="day in daysOfYear">
  <select ng-model="day.value" ng-options="value for value in availableValues"></select>
</div>

問題は、ブラウザが完全にフリーズしている間、Firefoxにロードするのにさらに5秒かかるなど、非常に遅いことです。を計算するとき、すでに2秒のフリーズがあることに注意してください。選択がない場合は2秒間フリーズし、選択がある場合は7秒間フリーズするので、これは選択が原因であると確信しています。また、selectの1つの値を変更するたびに、追加の小さなフリーズが発生します。daysOfYear

そこで、ニュースグループで読んだアドバイスに従い、を埋める独自のモジュールを作成することにしました<select>。私のモジュール（以下のコードを参照）は、配列にディレクティブを持つany<select>を追加します。app-typeslist次に、のリストがoptionsサーバーからロードされ、リスト内のすべての要素が指定されたオプションで埋められます。

問題は、AngularJSがオプションリストでこの変更を検出しないことです。には属性<select>がなく、「無効な値」の状態を表す追加の要素が含まれています。 この選択を更新するようにAngularJSに通知する方法はありますか？value<option>

ありがとう。

モジュールのソースコードは次のとおりです。質問に答える必要はまったくないと思いますが、とにかく質問するでしょう。

(function() {
    var elementsList = $();
    var html = null;
    angular
        .module('elementsTypes', [])
        .config(function($compileProvider) {
            $compileProvider.directive('appTypeslist', function() {
                var directiveDefinitionObject = {
                    link: function(scope, element, attrs) {
                        elementsList.push($(element));
                        if (html)
                            $(html).each(function() { $(this).clone().appendTo(element); });
                    }
                };
                return directiveDefinitionObject;
            });
        })
        .run(function($http, $rootScope) {
            $http.get(url of the types).success(function(data) {
                html = $();
                angular.forEach(data, function(category) {
                    var gr = $('<optgroup/>').attr('label', category.description);
                    angular.forEach(category.elements, function(elem) {
                        $('<option/>').attr('value', elem.name).text(elem.description).appendTo(gr);
                    });
                    html.push(gr);
                });
                elementsList.each(function() {
                    var e = this;
                    $(html).each(function() { $(this).clone().appendTo(e); });
                });
            });
        });
})();
4

1 に答える 1

0

さて、私はを完全に削除ng-modelし<select>、バインディングを含めるようにモジュールを拡張しました。

(function() {
    var elementsList = $();
    var html = null;

    var refreshElement = function(node) {
        var newVal = $(node).data('appTypeslist');
        $(node).val(newVal);
    };

    angular
        .module('elementsTypes', [])
        .config(function($compileProvider) {
            $compileProvider.directive('appTypeslist', function() {
                var directiveDefinitionObject = {
                    link: function(scope, element, attrs) {
                        elementsList.push(element);
                        if (html)
                            $(html).each(function() { $(this).clone().appendTo(element); });
                        scope.$watch(attrs.appTypeslist, function(newVal) {
                            $(element).data('appTypeslist', newVal);
                            refreshElement(element);
                        });
                        $(element).change(function() {
                            $(element).data('appTypeslist', $(this).val());
                            scope.$apply(attrs.appTypeslist + ' = "' + $(this).val().replace(/([\\"'])/g, "\\$1").replace(/\0/g, "\\0") + '"');
                            refreshElement(element);
                        });
                    }
                };
                return directiveDefinitionObject;
            });
        })
        .run(function($http, $rootScope) {
            $http.get(url).success(function(data) {
                html = $();
                angular.forEach(data, function(category) {
                    var gr = $('<optgroup/>').attr('label', category.description);
                    angular.forEach(category.elements, function(elem) {
                        $('<option/>').attr('value', elem.name).text(elem.description).appendTo(gr);
                    });
                    html.push(gr);
                });
                elementsList.each(function() {
                    var e = this;
                    $(html).each(function() { $(this).clone().appendTo(e); });
                    refreshElement(e);
                });
            });
        });
})();
于 2012-12-04T13:35:46.733 に答える