当检查一个嵌套复选框时,angularjs-make按钮处于活动状态

时间:2017-05-10 12:05:36

标签: javascript angularjs

当用户选择其中一个嵌套复选框但我的脚本无效时,我想让提交按钮处于活动状态。

HTML

<div ng-controller="new_report_ctrl" class="list">
  <form id="report" name="report" method="post">
    <label class="item item-input item-stacked-label">
    <ion-list ng-repeat="item in accounts">
      <ion-checkbox ng-model="account_number">{{item.account_number}}</ion-checkbox>
    </ion-list>
    <label class="item item-input item-stacked-label">
      <span class="input-label">Report</span>
      <input type="text"  ng-model="user_report"  placeholder="Please enter your report here" required>
    </label>  

    <br />

    <p align="center"><button ng-disabled="!isChecked()" class="button button-positive" ng-click="report()" >Submit</button></p>
  </form>
</div>

JS

$scope.customer_name=localStorage.getItem("customer_name");
$scope.username=localStorage.getItem("username");

$http.get('http://localhost/myapp/templates/user/accounts.php?username='+$scope.username).success
    (function(data){
       $scope.accounts=data;
       console.log(JSON.stringify(data));
});   

$scope.isChecked=function(){
    return ($scope.account_number)
}

当我不使用ng-repeat时,脚本可以正常工作

1 个答案:

答案 0 :(得分:4)

有一个有效的例子..您需要检查所有复选框值,而不仅仅是最后一个。

var app = angular.module("app",[]);
app.controller("ctrl", function($scope){

    $scope.customer_name="customer_name";
    $scope.username="username";
    $scope.accounts = [];
    for( var i = 0; i < 10; i++)
{
  $scope.accounts.push({account_number:(100+i),isChecked:false })
}


        $scope.isChecked=function()
        {
          for( var i = 0; i < $scope.accounts.length; i++)
          {
            if($scope.accounts[i].isChecked == true)
              return true;
          }            
          return false;
        }

})
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body  ng-app="app" ng-controller="ctrl" >
  

<div class="list">
<form id="report" name="report" method="post">
  <label class="item item-input item-stacked-label">
<ul>
<li ng-repeat="item in accounts">
  <input type="checkbox" ng-model="item.isChecked">{{item.account_number}}</ion-checkbox>
</li>
</ul>
  <label class="item item-input item-stacked-label">
    <span class="input-label">Report</span>
        <input type="text"  ng-model="user_report"  placeholder="Please enter your report here" required>
  </label>  

  <br />

  <p align="center"><button ng-disabled="!isChecked()" class="button button-positive" ng-click="report()" >Submit</button></p>

  </form>
  </div>



  </body>
</html>