javascript - 在 btn 组中需要一个按钮

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>

现在在你的 Controller 中。默认情况下将按钮设置为 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>