Angular指令預選 <select> ngOptions中只有一個選項時的值

Question

我想編寫指令來檢查范圍內的可用選項，並在ngOptions中僅存在一項的情況下預先選擇一些選項。

現在，我寫了這樣的東西：

<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>

和我的指令：

'use strict';

angular.module('app')
    .directive('selectFirstIfOnlyOne', function() {
        return {
            restrict: 'A',
            require: 'select',
            link: function(scope, elem, attrs, ctrl) {
                scope.$watchCollection(attrs.selectFirstIfOnlyOne, function(values) {
                    if (angular.isDefined(values) && values.length === 1) {
                        scope.$evalAsync(function() {
                            ctrl.ngModelCtrl.$setViewValue(values[0]);
                        });
                    }
                });
            }
        };
    });

而且有效。 但是我不想將數組值直接傳遞給指令，而是要從ngModel或ngOptions中獲取它們。

我發現SelectController不提供從<select>獲取所有值的方法，與NgModelController相同。

Answer 1

如果您不打算在不重新加載示波器的情況下更改ng-options，這種小提琴便會起作用。

首先，就我所知，您無法從ng-options獲取信息。 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];
            }
        }
    };
});

如果要隔離范圍，則需要通過隔離的范圍var傳遞信息：

html select-first-if-only-one =“ providers.length”

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];
            }
        }
    };
});

抱歉，我有點着急，如果您仍然不滿意，可以進一步更改。

Answer 2

用正則表達式解決：

http://jsfiddle.net/PxdSP/3206/

碼：

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();
            });
          }
        });
      }
    };
});