0

最近我一直在开发一个网络应用程序，<select>一年中的每一天我都需要一个元素。

所以我做了这样的事情，其中daysOfYear​​是一年中所有日子的availableValues数组，并且是所有可能值的数组。

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

问题是它非常慢，在 Firefox中加载大约需要 5 秒，在此期间浏览器完全冻结。请注意，计算时已经有 2 秒的冻结daysOfYear。没有选择我有 2 秒的冻结，有选择我有 7 秒的冻结，所以我确定这是由 selects 引起的。每当我更改其中一个选择的值时，还会有一个额外的小冻结。

所以我决定遵循我在新闻组上看到的建议，编写自己的模块来填充<select>. 我的模块（请参阅下面的代码）将任何<select>带有指令的app-typeslist指令添加到数组中。然后options从服务器加载列表，列表中的所有元素都用给定的选项填充。

问题是 AngularJS 没有在选项列表中检测到这个修改。<select>没有属性，并且包含一个表示“无效值”状态 的value附加元素。有没有办法告诉 AngularJS 我希望它更新这个选择？<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 回答