Question

我有两个同样问题的下拉列表。我的挑战是，每当我选择1时，另一个也会被选中。此外，如果存在验证错误，则仅在一个下拉列表中抛出。我错过了什么？

 <div class="form-group">
                    <label for="ctctype_id">
                       Current CTC
                    </label>
                    <select class="form-control" name="ctctype_id" id="ctctype_id" data-ng-model="formJobApplyData.salary_range"
                            data-ng-options="salary.key for salary in salaryList" data-validate-selected-keyvalue></select>
                </div>

                <div data-ng-messages="jobForm.ctctype_id.$error" data-ng-show="jobForm.ctctype_id.$invalid && (jobForm.ctctype_id.$touched || jobForm.ctctype_id.$dirty)" class="form-message">
                    <p data-ng-message="validselectedkeyvalue">
                        Please select your current CTC from the list
                    </p>
                </div>

                <div class="form-group">
                    <label for="exptype_id">
                       Expected CTC
                    </label>
                    <select class="form-control" name="expctc_id" id="expctc_id" data-ng-model="formJobApplyData.salary_range"
                            data-ng-options="salary.key for salary in salaryList" data-validate-selected-keyvalue></select>
                </div>

                <div data-ng-messages="jobForm.expctc_id.$error" data-ng-show="jobForm.expctc_id.$invalid && (jobForm.expctc_id.$touched || jobForm.expctc_id.$dirty)" class="form-message">
                    <p data-ng-message="validselectedkeyvalue">
                        Please select your expected CTC from the list
                    </p>
                </div>

我的javascript评估：

app.directive('validateSelectedKeyvalue', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attr, ctrl) {
            ctrl.$validators.validselectedkeyvalue = function (viewValue) {
                if (typeof (viewValue) != 'undefined') {
                    return ((typeof (viewValue.id) != 'undefined') && viewValue.id != 0) ? true : false;
                }
                else { return true; }
            }
        }
    };
});

Answer 1

一个下拉列表正在改变另一个的原因是因为它们绑定到同一个范围变量。

data-ng-model="formJobApplyData.salary_range"

我建议制作一个formJobApplyData.current_salary和一个formJobApplyData.expected_salary。

这也是有意义的，只有一个字段被验证。这是因为实际上只选择了一个值。

Angular - 具有相同数据源的两个下拉列表

1 个答案: