使用ng-repeat重写ng-options,以便与md-select一起使用

时间:2017-12-19 15:36:40

标签: angularjs twitter-bootstrap angular-ngmodel angularjs-material md-select

我正在尝试将Bootstrap选择字段转换为Angular Material,但是很难让代码与ng-repeat一起使用,而不是使用ng-options。原始代码如下所示:

<select name="{{field.name}}" ng-model="fieldValue" ng-model-options="{getterSetter: true}" sn-select-width="auto" ng-disabled="field.isReadonly()" ng-options="c.value as c.label for c in field.choices track by c.value">

新的AngularJS Material html代码如下所示:

<md-select name="{{field.name}}" ng-model="fieldValue" ng-disabled="field.isReadonly()">
    <md-option ng-value="c.value" ng-repeat="c in field.choices | filter:searchTerm track by c.value">{{c.label}}</md-option>
</md-select>

md-select中的所选项目不会保存在后端表格中。我在这里错过了什么?我很确定无法使用ng-options导致此问题,但如何使用ng-repeat修复它?

更新:开箱即用指令代码的其余部分在下面以供参考。

link: function(scope, element, attrs, ngModel) {
            scope.clearSearchTerm = function() {
                scope.searchTerm = '';
            };

            var g_form = scope.getGlideForm();
            var field = scope.field;
            var fieldOptions;
            var isOpen = false;
             scope.fieldValue = function() {
                 return field.value;
             };
            g_form.$private.events.on('change', function(fieldName, oldValue, newValue) {
                if (fieldName == field.name) {} else if (fieldName == field.dependentField) {
                    field.dependentValue = newValue;
                    refreshChoiceList();
                } else if (typeof field.variable_name !== 'undefined' && field.reference_qual && isRefQualElement(fieldName)) {
                    refreshReferenceChoices();
                }
            });

            function isRefQualElement(fieldName) {
                var refQualElements = [];
                if (field.attributes && field.attributes.indexOf('ref_qual_elements') > -1) {
                    var attributes = spUtil.parseAttributes(field.attributes);
                    refQualElements = attributes['ref_qual_elements'].split(',');
                }
                return field.reference_qual.indexOf(fieldName) != -1 || refQualElements.indexOf(fieldName) != -1;
            }

            function refreshChoiceList() {
                var params = {};
                params.table = g_form.getTableName();
                params.field = field.name;
                params.sysparm_dependent_value = field.dependentValue;
                var url = urlTools.getURL('choice_list_data', params);
                return $http.get(url).success(function(data) {
                    field.choices = [];
                    angular.forEach(data.items, function(item) {
                        field.choices.push(item);
                    });
                    selectValueOrNone();
                });
            }

            function selectValueOrNone() {
                var hasSelectedValue = false;
                angular.forEach(field.choices, function(c) {
                    if (field.value == c.value)
                        hasSelectedValue = true;
                });
                if (!hasSelectedValue && field.choices.length > 0) {
                    g_form.setValue(field.name, field.choices[0].value, field.choices[0].label);
                }
           }

            function refreshReferenceChoices() {
                var params = [];
                params['qualifier'] = field.reference_qual;
                params['table'] = field.lookup_table;
                params['sysparm_include_variables'] = true;
                params['variable_ids'] = field.sys_id;
                var getFieldSequence = g_form.$private.options('getFieldSequence');
                if (getFieldSequence) {
                    params['variable_sequence1'] = getFieldSequence();
                }
                var itemSysId = g_form.$private.options('itemSysId');
                params['sysparm_id'] = itemSysId;
                var getFieldParams = g_form.$private.options('getFieldParams');
                if (getFieldParams) {
                    angular.extend(params, getFieldParams());
                }
                var url = urlTools.getURL('sp_ref_list_data', params);
                return $http.get(url).success(function(data) {
                    field.choices = [];
                    angular.forEach(data.items, function(item) {
                        item.label = item.$$displayValue;
                        item.value = item.sys_id;
                        field.choices.push(item);
                    });
                    selectValueOrNone();
                });
            }
            var pcTimeout;
            g_form.$private.events.on('propertyChange', function(type, fieldName, propertyName) {
                if (fieldName != field.name)
                    return;
                if (propertyName == "optionStack") {
                    $timeout.cancel(pcTimeout);
                    pcTimeout = $timeout(function() {
                        field.choices = applyOptionStack(fieldOptions, field.optionStack);
                        selectValueOrNone();
                    }, 35);
                }
            });
            setDefaultOptions();
            if (field.choices) {
                setChoiceOptions(field.choices);
            }
            selectValueOrNone();

            function setDefaultOptions() {
                setChoiceOptions([{
                    value: scope.field.value,
                    label: scope.field.displayValue || scope.field.placeholder
                }]);
            }

            function setChoiceOptions(options) {
                if (options) {
                    options.forEach(function(option) {
                        option.value = String(option.value);
                    });
                }
                fieldOptions = options;
                scope.options = applyOptionStack(options, scope.field.optionStack);
            }

            function applyOptionStack(options, optionStack) {
                if (!optionStack || optionStack.length == 0) {
                    return options;
                }
                var newOptions = angular.copy(options);
                if (!newOptions) {
                    newOptions = [];
                }
                optionStack.forEach(function(item) {
                    switch (item.operation) {
                        case 'add':
                            for (var o in newOptions) {
                                if (newOptions[o].label == item.label)
                                    return;
                            }
                            var newOption = {
                                label: item.label,
                                value: item.value
                            };
                            if (typeof item.index === 'undefined') {
                                newOptions.push(newOption);
                            } else {
                                newOptions.splice(item.index, 0, newOption);
                            }
                            break;
                        case 'remove':
                            var itemValue = String(item.value);
                            for (var i = 0, iM = newOptions.length; i < iM; i++) {
                                var optionValue = String(newOptions[i].value);
                                if (optionValue !== itemValue) {
                                    continue;
                                }
                                newOptions.splice(i, 1);
                                break;
                            }
                            break;
                        case 'clear':
                            newOptions = [];
                            break;
                        default:
                    }
                });
                return newOptions;
            }       
        }
    };
}

0 个答案:

没有答案