按钮在Angular的复选框状态下禁用/启用

Question

我创建了一个可重用的指令，并以两种不同的形式使用它，但无法在表单中使用/禁用按钮，该按钮根据指令中的复选框状态而变化。我想要禁用按钮，直到未选中复选框，并在复选框取消选中时禁用它。

我的Fiddle

HTML

<div ng-app='demo'>
  <form name="verification" ng-controller="myCtrl1">
    <terms-conditions conditions="conditions"></terms-conditions>
    <br>
    <button class="btn-primary" ng-disabled="!checked" >Submit</button>
    <hr>
  </form>

  <form name="bankinfo" ng-controller="myCtrl2">
    <terms-conditions conditions="conditions"></terms-conditions>
      <br>
      <button class="btn-primary">Submit</button>
      <hr>
  </form>
</div>

JS

var demo = angular.module('demo', []);
demo.directive("termsConditions",function(){
return {
    restrict:"E",
    scope:{
        conditions:'='

    },
    template:
    "<div class='terms row'><span class='col-md-12'>{{conditions}}</span></div><br><input type='checkbox'><span>Yes, I agree to the terms and condtions</span>"
}

});
demo.controller("myCtrl1",function($scope){
    $scope.conditions= " Payment terms" ;

})
demo.controller("myCtrl2",function($scope){
 $scope.conditions= "Bank Terms" ;

});

CSS

span {
  font-weight:bold;
}
.terms{font-weight: normal;
  width: 500px;
  height: 50px;
  overflow-y: scroll;
  padding: 5px 5px 5px 5px;
  border-style: solid;
  border-color: #666666;
  border-width: 1px;
}

Answer 1

你几乎做对了，你需要传递checked属性值作为双向绑定属性并使用ng-disabled。

  <terms-conditions conditions="conditions" checked="checked"></terms-conditions>   <br>
  <button class="btn-primary" ng-disabled="!checked" >Submit</button>

<强> Fiddle