Single checkbox for angular js

Question

I have to use single checkbox for my code

My doc.ejs

<tr ng-repeat="folder_l in folderlist | orderBy:created_date" >
   <td>
      <div class="permit">
         <input class="chkbtn move_check" type="checkbox" id="movecheck{{folder_l._id}}" name="movecheck" value="{{folder_l._id}}" ng-model="checkfolder" ng-click="updateSelection($index, folderlist)" />
         <label class="chklabel" for="movecheck{{folder_l._id}}"></label>{{checkfolder}}
      </div>
   </td>
</tr>

app.js:

$scope.updateSelection = function(position, entities) {
  angular.forEach(entities, function(subscription, index) {
         console.log('position')

     console.log(parseInt(position))
         console.log('index')

    console.log(parseInt(index))

          $scope.checkfolder;

        if (parseInt(position) == parseInt(index)) {
      console.log("Equal")
     $scope.checkfolder = true;
    }
    else{
      $scope.checkfolder = false;
    }
  });
}

I searched so many links and i have tried, but nothing is working for my code, even i have tried jquery click,but click function has not getting called.

UPDATE My JSON

{
    "_id" : *****,
    "__v" : 0,
    "folder_name" : "Music",
    "status" : "Y",
    "created_date" : ISODate("2017-12-29T10:50:31.171Z"),
    "updated_date" : ISODate("2017-12-29T10:50:31.171Z")
}

use ng-change="updateSelection($index, folderlist)" instead of ng-click="updateSelection($index, folderlist)" — Manvendra Priyadarshi
– Manvendra Priyadarshi, Commented Feb 6, 2018 at 7:03
@AngelPolitis i have to select only one checkbox , all checkbox should be unchecked except the clicked one — Vishnu
– Vishnu, Commented Feb 6, 2018 at 7:05
@ManvendraPriyadarshi Thanks, I tried ng-change too, but its act like multi check only — Vishnu
– Vishnu, Commented Feb 6, 2018 at 7:13

Venka Tesh user5397700 · Accepted Answer · 2018-02-06 07:20:17Z

1

HTML :

<tr ng-repeat="folder_l in folderlist | orderBy:created_date" >
   <td>
      <div class="permit">
         <input class="chkbtn move_check" type="checkbox" id="movecheck{{folder_l._id}}" name="movecheck" value="{{folder_l._id}}" ng-model="folder_l.checkfolder" ng-click="updateSelection($index, folderlist)" ng-checked="{{folder_l.checkfolder}}" />
         <label class="chklabel" for="movecheck{{folder_l._id}}"></label>{{folder_l.checkfolder}}
      </div>
   </td>
</tr>

JS

$scope.updateSelection = function(position, entities) {
    angular.forEach(entities, function(subscription, index) {
        if (parseInt(position) == parseInt(index)) {
          subscription.checkfolder = true;
        } else {
            subscription.checkfolder = false;
        }
    });
}

answered Feb 6, 2018 at 7:20

Venka Tesh user5397700

3593 silver badges18 bronze badges

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

5 Comments

Vishnu Over a year ago

Thank you for your response, Its working but I could not able to unchecked the selected one

Venka Tesh user5397700 Over a year ago

change this line "subscription.checkfolder = true;" to " subscription.checkfolder != subscription.checkfolder;"

Vishnu Over a year ago

Thank you so much..its working perfectly, after changing this line.. could you please explain me , why its working after changing

Venka Tesh user5397700 Over a year ago

by default we only changed to true. now if the value is true changed to false and if the value is false changed to true.

Vishnu Over a year ago

Thank u so much :)

Rakesh Chand · Accepted Answer · 2018-02-06 07:16:55Z

0

for this you need to create virtual model. if you see i have created isSelected

<tr ng-repeat="folder_l in folderlist | orderBy:created_date" >
   <td>
     <div class="permit">
     <input class="chkbtn move_check" type="checkbox" 
       id="movecheck{{folder_l._id}}" name="movecheck" value="
         {{folder_l._id}}" ng-model="folder_l.isSelected"/>
     <label class="chklabel" for="movecheck{{folder_l._id}}"></label>
     {{folder_l.isSelected}}
      </div>
   </td>
</tr>

by doing only this you will able to select only one checkbox at a time. and for submitting you can traverse through the array.

angular.forEach(entities, function(subscription, index) {
       if(subscription.isSelected)
         console.log('position')
})

edited Feb 6, 2018 at 7:16

Rakesh Chand

3,1131 gold badge25 silver badges43 bronze badges

answered Feb 6, 2018 at 7:14

Ranjeet Avghad

3851 silver badge12 bronze badges

1 Comment

Vishnu Over a year ago

Thank u for your reply, i will try this.

Collectives™ on Stack Overflow

Single checkbox for angular js

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related