Question

对于表单验证，应在下面选择“Foo”或“Bar”。表单应该无效，如果没有选择，则提交按钮被禁用。

是否有一个AngularJS指令可以胜任这项任务？我们尝试了一些“ng-require”和/或“required”的排列，以及其他一些实验，但没有运气。按钮不可能吗？

<div class="form-group">
    <div class="btn-group">
        <button type="button" class="btn btn-default" data-ng-click="vm.setCaseType('Foo')" data-ng-class="{ 'active': vm.caseType == 'Foo' }">Foo</button>
        <button type="button" class="btn btn-default" data-ng-click="vm.setCaseType('Bar')" data-ng-class="{ 'active': vm.caseType == 'Bar'}">Bar</button>
    </div>
</div>

AngularJS 1.2.16; Bootstrap 3.1.1

Answer 1

单击任何按钮调用一个方法，将标志设置为false，表示'btnSelected'。现在，您可以在提交按钮内使用带有ng-disabled的标记。

以下述方式

               <div class="btn-group">
                    <button type="button" class="btn btn-default" data-ng-click="Chk()">Foo</button>
                    <button type="button" class="btn btn-default" data-ng-click="Chk()">Bar</button>
                </div>

现在在你的控制器中。默认情况下按钮为true以保持按钮禁用，通过以下功能通过标志启用它：

   $scope.btnSelected = true;
 $scope.Chk = function(){
        $scope.btnSelected = false;
    }

在保存按钮上：

<button type="submit" ng-disabled="testForm.$invalid || btnSelected" class="btn btn-      primary">
 <span class="glyphicon glyphicon-save"></span> Save   </button>

在btn-group中需要一个按钮

1 个答案: