selecting checkbox id from table in Angularjs

Question

I am new to Angularjs. I have created a table using Angularjs. I am populating the content of the table from the controller and using ng-repeat in the html to render the data.

I also need to handle the checkbox check event and populate the array in the controller. I have added the checkboxes in the view. I am able to bind the content but when I am not able to handle the the checkbox event when checked. How to handle this in Angularjs. I have added the ng-change and ng-model but I want to populate the selected checkbox id from the $scopr.update function. Currently whenever there is change event, the function is called with the id, but I don't know if the checkbox is checked on unchecked. Where I am going wrong?

Code for the UI

<div class="ibox-content">
  <div class="row">
    <div class="col-sm-4 m-b-xs">
      <div data-toggle="buttons" class="btn-group">
        <label class="btn btn-sm btn-white"> <input type="radio" id="option1" name="options">10</label>
         <label class="btn btn-sm btn-white"> <input type="radio" id="option2" name="options">25</label>
         <label class="btn btn-sm btn-white"> <input type="radio" id="option3" name="options">50</label>
       </div>
     </div>
     <div class="col-sm-3 pull-right">
       <div class="input-group">
         <div class="input-group-addon"><i class="fa fa-search"></i></div>
           <input type="text" class="form-control" placeholder="Search Host" ng-model="name">
         </div>
       </div>
     </div>
     <div class="table-responsive">
       <table class="table table-striped table-bordered">
         <thead>
           <tr>
             <td>Select</td>
               <td>
                 <a href="#" ng-click="sortType = 'name'; sortReverse = !sortReverse">
                      Hostname
                   <span ng-show="sortType == 'name' && !sortReverse" class="fa fa-caret-down"></span>
                   <span ng-show="sortType == 'name' && sortReverse" class="fa fa-caret-up"></span>
                 </a>
                </td>
                <td>
                  <a href="#" ng-click="sortType = 'application'; sortReverse = !sortReverse">
                          Application
                    <span ng-show="sortType == 'application' && !sortReverse" class="fa fa-caret-down"></span>
                    <span ng-show="sortType == 'application' && sortReverse" class="fa fa-caret-up"></span>
                  </a>
                  </td>
                  <td>
                    <a href="#" ng-click="sortType = 'environment'; sortReverse = !sortReverse">
                          Environment
                      <span ng-show="sortType == 'environment' && !sortReverse" class="fa fa-caret-down"></span>
                      <span ng-show="sortType == 'environment' && sortReverse" class="fa fa-caret-up"></span>
                    </a>
                  </td>
              </tr>
            </thead>
            <tbody>
              <tr dir-paginate="host in newHosts | orderBy:sortType:sortReverse | filter:name | itemsPerPage: 10
        " pagination-id="host">
                  <td><input type="checkbox" ng-change="update(host.id)" ng-model="host_id"/></td>
                  <td>{{host.name}}</td>
                  <td>{{host.application}}</td>
                  <td>{{host.environment}}</td>
                </tr>
              </tbody>
          </table>
        </div>
      </div>

In the controller:

  $scope.selectedHost=[];
  $scope.sortType     = 'name'; // set the default sort type
  $scope.sortReverse  = false;  // set the default sort order
  $scope.searchHost   = '';     // set the default search/filter term

  $scope.newHosts=[
                   {
                     "name": "Pradeep", 
                     "application": "MMC", 
                     "environment": "Prod"
                   },
                   {
                     "name": "Praveen", 
                     "application": "TTC", 
                     "environment": "Pre"
                   }
                  ]
   $scope.update=function(hostId){
      console.log(hostId);
   }

<input type="checkbox" ng-change="update()" /> and then add update function in controller scope — Tushar
– Tushar, Commented Jul 13, 2015 at 5:45
u could use an id attribute in ur table as well, like id="checkbox{{$index}}" — Ashish Ratan
– Ashish Ratan, Commented Jul 13, 2015 at 5:55

Huy Hoang Pham · Accepted Answer · 2015-07-13 05:58:00Z

1

First, add the ng-click into your checkbox

<td><input type="checkbox" ng-click=update(host)/></td>

Then call the update function in the controller

$scope.update = function(host){
   var hostIndex = $scope.selectedHost.indexOf(host);
   if(hostIndex == -1) {
      $scope.selectedHost.push(host); //Add the selected host into array
   } else {
      $scope.selectedHost.splice(hostIndex, 1); //Remove the selected host
   }
}

answered Jul 13, 2015 at 5:58

Huy Hoang Pham

4,1471 gold badge19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zilcuanu Over a year ago

I think I need to add the ng-model also else it throws an error when using only ng-change

Huy Hoang Pham Over a year ago

I used NG-CLICK, so the event is only fired when you CLICK the checkbox. The ng-change is fired when you change the bind value of the checkbox.

Ashish Ratan · Accepted Answer · 2015-07-13 06:23:45Z

1

U could send inde as well by using $index to the function and it will give you the exact index of the selected row, so that u can get it from your array, as well as u can do more code by using this, u are not required to get index ( a probability to not to get right index in some cases)

<td><input type="checkbox" ng-click=update($index)/></td>


$scope.update = function(hostIndex){
   var host= $scope.selectedHost[hostIndex];
   if(hostIndex == -1) {
      $scope.selectedHost.push(host); //Add the selected host into array
   } else {
      $scope.selectedHost.splice(hostIndex, 1); //Remove the selected host
   }
}

answered Jul 13, 2015 at 6:23

Ashish Ratan

2,8681 gold badge26 silver badges51 bronze badges

Collectives™ on Stack Overflow

selecting checkbox id from table in Angularjs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related