选择第一个选项时使选择无效答案

【问题标题】：Invalidate select when the first option is selected选择第一个选项时使选择无效
【发布时间】：2015-02-15 00:16:45
【问题描述】：

我将通过第一个值验证选择框 (ngOption)（如果选择第一个值 - 假，如果不是 - 真），我不想在选择框中使用预定义的值，如下所示：

<select id="mainVideo" class="form-control"
      ng-model="qtTestData.mainVideo"
      ng-options="mainVideo for mainVideo in mainVideoSources"
      name="mainVideo"
      required>
   <option value="">-- Please, select a value --</option>
</select>

所以，我有这样的选择框：

<select id="mainVideo" class="form-control" requiredSelect
      ng-model="qtTestData.mainVideo"
      ng-options="mainVideo for mainVideo in mainVideoSources"
      name="mainVideo"
      required>
</select>

我的数组是：

 $scope.mainVideoSources = ['Please, select a value', 'Value1', 'Value2'];

我正在使用该指令来定义是否选择了第一个值（这意味着用户没有更改该值）

App.directive('requiredSelect', function () {
    return {
        restrict: 'AE',
        require: 'ngModel',
        link: function(scope, element, attributes, ngModel) {
            if (!ngModel) return;
            attributes.requiredSelect = true; 

            var validator = function(value) {
                if ( value != 'Please, select a value' ) { 
                    ngModel.$setValidity('requiredSelect', false);
                    return false;
                } else {
                    ngModel.$setValidity('requiredSelect', true);
                    return true;
                }
            };
            ngModel.$formatters.push(validator);
            ngModel.$parsers.unshift(validator);
            attributes.$observe('requiredSelect', function() {
                validator(ngModel.$viewValue);
            });
        }
    };
});

选择无效值时应显示的 HTML：

<div class="has-error bg-danger" ng-show="qtTestForm.mainVideo.$error.requiredSelect">
   <p class="text-center">Oops, something wasn't right</p>
</div>

但它不起作用...... 声明 (value != 'Please, select a value') 如何以 Angular 方式重写？在 JS 中就像这样 select.selectedIndex == 0

【问题讨论】：

标签： javascript angularjs select angularjs-directive ng-options

【解决方案1】：

您可以将数据分为“数据值”和“显示值”：

sources = [{
    value: '',
    label: 'Please select a value'
}, {
    value: 'value1'
}, ...]

然后使用

<select ng-options="item.value as item.label for item in sources" required ...></select>

让required 验证器完成剩下的工作。无需创建自己的指令。

作为旁注，如果您正在创建验证指令，请使用 ngModelController.$validators（而不是 $parsers 和 $formatters）。此外，如果您将 ngModel 作为强制要求，则无需检查其是否存在。

【讨论】：

谢谢，但我是从服务器获取数组，所以我必须想办法，如何验证第一个值进入选择
从服务器获取数据并不妨碍您对其进行转换以满足您的需求。 [{ value: '', label: 'Please select a value' }].concat(data.map(function (value) { return { value: value }; })) 或者，如果您真的只想调整模板，请使用 ng-repeat 和 ng-value 手动创建您的 <option>s。

【解决方案2】：

使用对象数组代替值数组，如下所示：

$scope.mainVideoSources = [ { "value": 0, "text": "Please, select a value" }, {{ "value": 0, "text": "Value1"}, { "value": 0, "text": "Value2"} ];

【讨论】：

【解决方案3】：

@hon2a, 原生 Angular 验证效果很好，谢谢。我已经重写了关于 $validators 的指令。现在看起来

App.directive('requiredSelect', function () {
return {
    restrict: 'AE',
    require: 'ngModel',
    link: function(scope, element, attributes, ngModel) {
        ngModel.$validators.requiredSelect = function(modelValue, viewValue) {
            var value = modelValue || viewValue;
            var requiredSelect = 'Please, select a value'; //TBD.. select first ngOption
            return value != requiredSelect;
        };
    }
};

});

它对我有用。

【讨论】：