angularjs-make button active when one nested check box is check

Question

i want to make the submit button active when user select one of the nested checkboxes but my script fails to works.

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)
}

When i don't use ng-repeat on it the script works

Maybe you need to parse the response: $scope.accounts=JSON.parse(data); — Mihai Alexandru-Ionut
– Mihai Alexandru-Ionut, Commented May 10, 2017 at 12:11
@BasSlagter, i do get data and i'm able to bind. {{item.account_number}} — user6579134
– user6579134, Commented May 10, 2017 at 12:19

Burak Akyıldız · Accepted Answer · 2017-05-10 12:21:09Z

There is a working example.. You need to check all checkboxes value not only last one.

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>

Collectives™ on Stack Overflow

angularjs-make button active when one nested check box is check

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related