Question

我想禁用“提交”按钮，直到使用Angular检查2或3个复选框。

请参阅下面的开始代码示例。我不确定Angular是否是最佳方式！

我需要支持IE8和旧浏览器

任何提示？

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<script type="text/javascript" src="angular.min.js"></script>
<script>
    var model = {
        user: "Adam",
        items: [{ action: "Flowers", done: false },
        { action: "Shoes", done: false },
        { action: "Tickets", done: false },
        { action: "Cimputer", done: false }]
    };
    var todoApp = angular.module("todoApp", []);
    todoApp.controller("ToDoCtrl", function ($scope) {
        $scope.todo = model;
    });
</script>
</head>
<body ng-controller="ToDoCtrl">
        <table>
                <tr ng-repeat="item in todo.items">
                    <td>{{item.action}}</td>
                    <td><input type="checkbox" ng-model="item.done" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" value="Save"/></td>
                </tr>
        </table>

</body>
</html>

Answer 1

如果您不需要支持IE8或更早版本的浏览器，则可以使用AngularJS ngDisabled指令。

ngDisabled允许您根据$scope变量的布尔值禁用按钮。以下是在$scope.isDisabled为真时禁用的按钮示例。

<button ng-disabled="{{scope.isDisabled}}">Save</button>

每当选中/取消选中复选框时，您都可以使用$scope.$watchCollection之类的内容来更新$scope.isDisabled。

您可以从AngularJS文档中找到有关ngDisabled的更多信息：
https://docs.angularjs.org/api/ng/directive/ngDisabled

Answer 2

您可以按完成过滤项目，并检查过滤后的列表长度是否足够长

<td><input type="submit" value="Save" ng-disabled="(todo.items | filter: item.done != true).length < 2" /></td>

如果您想限制最大值，您可以执行以下操作

<td><input type="submit" value="Save" ng-disabled="((todo.items | filter: item.done != true).length < 2) || ((todo.items | filter: item.done != true).length > 3)" /></td>

禁用“提交”按钮，直到使用Angular选中2或3个复选框

2 个答案: