Angularjs 查看选择选项中的更改

我想根据输入中元素的数量禁用输入（例如，如果只有1个元素，则禁用）。现在我正在考虑一项指令。我之所以使用指令，是因为ng选项通常会变得非常复杂，因此将它们复制/粘贴到一个禁用ng的目录中会很烦人

我的问题是，我不能听选择中选项的数量（或者至少我还没有找到方法）。也就是说，我的想法是在link函数中这样做。基本选择（自动禁用为我的指令）：

占位符

链接方法的定义如下：

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

链接：功能（范围、元素、属性）{
作用域.$watch（元素[0]。长度，函数（）{
elem.prop（'disabled'，elem[0].length如果我理解您在这里需要的是在少于2个元素时禁用select，您不需要指令，只需查看数组长度即可：

HTML:

使用指令编辑：

HTML:



JS指令：

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

app.directive（'autoDisable'，function（）{
返回{
限制：“A”，
替换：正确，
链接：功能（范围、elm、属性）{
angular.element（文档）.ready（函数（）{
if（（elm[0].options.length-1）<2）{
elm.attr（“残疾”、“残疾”）；
}
});
}
};
});

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

希望能有帮助

下面是指令的提示：
D当只有一个元素时，你想完全禁用
选择
吗？是的，ng选项不幸地在我的输入数据上抛出了过滤器，真是太倒霉了：/这很可爱了，但如果你的ng选项也在你的数据上抛出了一些过滤器，那就没那么好笑了。你能用你现在的样子更新小提琴吗告诉，抱歉，我不能理解这一点。您可以在ng disabled、fiddle和answer Updated中使用相同的过滤器，以满足“我拥有它”的需求。但是，这意味着您必须在每次需要时复制任意复杂的过滤器，这不是一个非常令人满意的情况。完成指令后，请查看听到答案
<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>

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

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

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