Javascript 用于预选的角度指令<；选择>；如果NgoOptions中仅存在一个选项，则为

我想写一个指令，它将检查作用域中的可用选项，并在选项中只有一项时预选一些选项

现在我写了这样的东西：

<select id="provider" name="provider" class="form-control"
        ng-model="foo.provider"
        ng-options="provider.name for provider in providers track by provider.id"
        select-first-if-only-one="providers"
        required>
    <option value="">- Select -</option>
</select>

它是有效的。但我不想直接将数组值传递给指令，而是从ngModel或ngOptions获取它们

我发现它没有提供从

中获取所有值的方法，这与。

如果您不打算在不重新加载作用域的情况下更改ng选项，类似的方法也会起作用

首先，您无法从ng选项中获取信息（据我所知）。NgModel还没有值，如果只有一个选项，那么您正试图使用该指令设置该值

您可以通过与控制器共享作用域的方式执行此操作：

<div ng-app="app" ng-controller="cont">
    <select id="provider" name="provider" class="form-control"
        ng-model="foo.provider"
        ng-options="provider.name for provider in providers track by provider.id"
        select-first-if-only-one="providers"
            required>
        <option value="">- Select -</option>
    </select>
</div>

angular.module('app', [])
.controller('cont', function($scope) {
    $scope.foo = {}
    $scope.providers = [{name: 'bob', id: 1}]
})
.directive('selectFirstIfOnlyOne', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs, ctrl) {
            if (scope.providers.length < 2) {
                scope.foo.provider = scope.providers[0];
            }
        }
    };
});

-挑选-
角度.module（'app'，[]）
.controller（'cont'，函数（$scope）{
$scope.foo={}
$scope.providers=[{name:'bob'，id:1}]
})
.directive（'selectFirstIfOnlyOne'，function（）{
返回{
限制：“A”，
链接：函数（范围、元素、属性、ctrl）{
如果（scope.providers.length<2）{
scope.foo.provider=scope.providers[0]；
}
}
};
});

如果要隔离作用域，需要通过隔离的作用域变量传递信息：

html 如果只有一个=“providers.length”，请选择第一个

angular.module（'app'，[]）
.controller（'cont'，函数（$scope）{
$scope.foo={}
$scope.providers=[{name:'bob'，id:1}]
})
.directive（'selectFirstIfOnlyOne'，函数（$parse）{
返回{
限制：“A”，
作用域：{options:'=selectFirstIfOnlyOne'，model:'=ngModel'}，
链接：函数（范围、元素、属性、ctrl）{
如果（scope.options.length<2）{
scope.model=scope.options[0]；
}
}
};
});

抱歉，我这么做有点匆忙，如果您仍然不满意，我可以进一步更改此设置。

使用正则表达式解决：

代码：

---

您可以创建一个自定义元素指令来创建select元素，并将选项绑定到指令中的itrequire ngModel，然后从那里开始？@pQuestions123

ngModel

将绑定select的值，而不是其值options@Alon我是说在定制指令中只要求两者。从ngmodel中提取数组，然后执行您的操作…我如何从ngmodel中读取值？这样指令将与控制器高度耦合，我试图避免这种情况向指令添加一个范围并传入变量，我将编辑帖子。我理解您现在所说的内容，我不认为你们能从ng选项中得到任何信息，你们也不能从ng模型中得到任何信息，因为它还没有被选中。我仍然会用一个独立的作用域重新编写我的答案，但是您仍然需要传递一些信息，而不是从ng选项收集信息。

<div ng-app="app" ng-controller="cont">
    <select id="provider" name="provider" class="form-control"
        ng-model="foo.provider"
        ng-options="provider.name for provider in providers track by provider.id"
        select-first-if-only-one="providers"
            required>
        <option value="">- Select -</option>
    </select>
</div>

angular.module('app', [])
.controller('cont', function($scope) {
    $scope.foo = {}
    $scope.providers = [{name: 'bob', id: 1}]
})
.directive('selectFirstIfOnlyOne', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs, ctrl) {
            if (scope.providers.length < 2) {
                scope.foo.provider = scope.providers[0];
            }
        }
    };
});

angular.module('app', [])
.controller('cont', function($scope) {
    $scope.foo = {}
    $scope.providers = [{name: 'bob', id: 1}]
})
.directive('selectFirstIfOnlyOne', function($parse) {
    return {
        restrict: 'A',
        scope: {options: '=selectFirstIfOnlyOne', model: '=ngModel'},
        link: function(scope, elem, attrs, ctrl) {
            if (scope.options.length < 2) {
                scope.model = scope.options[0];
            }
        }
    };
});

angular.module('myApp')
  .directive('selectFirstIfOnlyOne', function () {
    return {
      restrict: 'A',
      require: 'select',
      link: function (scope, elem, attrs, ctrl) {
        var regex = /in (.+?)(?: |$)/; //Here
        var collection = regex.exec(attrs.ngOptions)[1]; // And here

        scope.$watchCollection(collection, function (values) {
          if (angular.isDefined(values) && values.length === 1) {
            scope.$evalAsync(function () {
              ctrl.ngModelCtrl.$setViewValue(values[0]);
              ctrl.ngModelCtrl.$render();
            });
          }
        });
      }
    };
});