Question

我正在尝试这样的事情 -

<button class="btn btn-lg btn-block btn-section"
     ng-disabled="{{ selectedfruits.length }} < 5" > Show selected fruits</button>

在chrome开发人员工具中，源代码如下所示

<button class="btn btn-lg btn-block btn-section" 
    ng-disabled="0 < 5">
        Show selected fruits</button>

但是按钮没有被禁用，我的控制器看起来像这样 -

.controller('fruitSelectorController',
     function ($scope, $rootScope, $timeout) { 
    $scope.fruits = ['a', 'b', 'c', 'd', 'e'];
                $scope.selectedfruits = [];
    });

Answer 1

您需要在没有插值{{ }}的情况下进行编写。它将自动解析内容并使用表达式

ng-disabled="selectedfruits.length < 5"

请参阅Documentation

Answer 2

您应该从ng-disabled中删除花括号。无需在视图HTML中评估数组。范围变量自动评估，角度具有很强的功能，这是双向绑定，因此自动视图将被更新。

<button class="btn btn-lg btn-block btn-section" ng-disabled=" selectedfruits.length  < 5" > Show selected fruits</button>

Answer 3

<!DOCTYPE html>
<html lang="en-US">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="fruitSelectorController">
<button ng-disabled="selectedfruits.length  < 5">Test</button>
</body>
<script type="text/javascript">
    angular.module('myApp',[]).controller('fruitSelectorController', function ($scope) 
    { 
        $scope.fruits = ['a', 'b', 'c', 'd', 'e'];
        $scope.selectedfruits = ['1'];
    });
</script>
</html>

ng-disabled不使用$ scope变量

3 个答案: