Question

我想基于其中的元素数量禁用输入（例如，仅在1个元素的情况下禁用）。现在我关注指令。我使用指令的原因是ng-options经常变得非常复杂，因此复制/粘贴它们会与ng-disabled进行比较会很烦人。

我的问题是我无法听取选择中的选项数量（或者至少我找不到方法）。即我的想法是在链接功能中做类似的事情。基本选择（自动禁用是我的指令）：

<select name="field1" ng-model="data.field1" ng-options="i.value as i.text for i in values" auto-disable >
  <option disabled value="" style="display: none;">placeholder</option>
</select>

，链接方法定义如下：

link: function (scope, elem, attrs) {
  scope.$watch(elem[0].length, function() {
    elem.prop('disabled', elem[0].length <= 1);
  });
}

那么：有没有办法观察一个选择中的元素，或者我可以在ng-disabled中轻易地以某种方式访问select的选项计数？

PS：我已经尝试过收听“data.field1”，但这并不适用于所有情况（例如，如果只是其他值发生了变化，但选择的值没有变化）。

Answer 1

如果我理解你需要的是JSFiddle，当少于2个元素时禁用select，你不需要一个指令只看数组长度：

HTML：

<div ng-app ng-controller="MyCtrl">
    <select name="field1" ng-model="data.field1" ng-options="i.value as i.text for i in values | filter: { valid: true }" ng-disabled="(values |filter: { valid: true }).length < 2">
</div>

JS：

function MyCtrl($scope) {
    $scope.values = 
    [
       {value: 'hello', text: 'world', valid: true},
       {value: 'hello2', text: 'world', valid: false},
       {value: 'hello3', text: 'world', valid: false},
       {value: 'hello4', text: 'world', valid: false},
    ];  
}

使用指令编辑：

HTML：

<div ng-controller="MyCtrl">  
    <select id="field1" ng-model="data.field1" ng-options="i.value as i.text for i in values | filter: { valid: true }" auto-disable></select>
</div>

JS DIRECTIVE：

app.directive('autoDisable', function() {
    return {
        restrict: 'A',
        replace: true,
        link: function(scope, elm, attrs) {
            angular.element(document).ready(function () {
                if ((elm[0].options.length - 1) < 2) {
                    elm.attr("disabled", "disabled");
                }
            });
        }
    };
});

为什么需要从options.length中减去1？因为ng-options会自动添加1个空选项，您必须从计数中删除。

希望有所帮助

以下是带有指令的JSFiddle：

注意选择选项中的更改

1 个答案: