How to get checkbox value in angularjs?

Question

I have a 10(or n)checkbox in my ng-view. Now I would like to ask here that What is the most efficient or simple way to check if checkbox is checked and if checked get the value of checkbox.

<ul>
  <li ng-repeat="album in albums">
   <input type="checkbox" ng-model="folder.Selected" value={{album.name}} />
   </li>
  </ul>

I have ng-controller(getAlbumsCtrl), in that I have an array in which I want to push all the checkedbox albums names into albumNameArray

Linseed

Answer 1

You can loop over the array to find out which is selected and push into the name array.

<ul>
  <li ng-repeat="album in albums">
    <input type="checkbox" ng-model="album.selected" value={{album.name}} />
  </li>
</ul>

$scope.save = function(){
  $scope.albumNameArray = [];
  angular.forEach($scope.albums, function(album){
    if (!!album.selected) $scope.albumNameArray.push(album.name);
  })
}

// alternatively you can use Array.prototype.filter on newer browsers (IE 9+)
$scope.save = function(){
  $scope.albumNameArray = $scope.albums.filter(function(album){
    return album.selected;
  });
}

jsbin

Leninism

I think if (!!album.selected) should be simple 'if (album.selected) { $scope.albumNameArray.push(album.name);' } But when I doing so.. I am getting (album.selected) = undefined. However, just for checking purpose I did value = {{album.selected}} it is true..but when in controller it is giving me undefined error.. – Linseed

This is what I am doing JavaScript:- angular.forEach($scope.albums, function (album) { if (album.selected) { $scope.albumNames.push(album.name); } }); HTML :- <input type="checkbox" class="checkbox-inline" ng-model="album.selected" value="{{album.name}}" /> I am getting album.selected = undefined. – Linseed

sorry I didn't see the checkbox value. Normally I don't put value when I use checkbox, just using ng-model. If value has an effect on the model, can you check whether the model is already the name itself instead of the object? – Leninism

I have 2 configurations in my routeConfig.. one is $routeProvider. when('/albums', { templateUrl: 'xyz.html', controller: 'getAlbumsCtrl' }) .when('/Album/:AlbumName', { templateUrl: 'xyz.html', controller: 'getAlbums12Ctrl' }) in getAlbums12Ctrl(), I am colllecting AlbumName is $routeParams, but what I need is whatever follows Album/* please collect it in AlbumName($routeParams) like this ** /albums/bollywood >>(AlbumName = "bollywood")** */albums/bollywood/old >> (AlbumName = "bollywood/old)" /albums/ – Linseed

I might not be knowledgeable enough on routes to answer this question, you can open a new one so others that know more about this may answer. – Leninism

Answer 2

Have a look at this fiddle,i have used the object whose key is the album name

<input type="checkbox" ng-model="folder[album.name]" value={{album.name}}/>

controller:

function ctrl($scope){
$scope.albums = [{name:'a1'},{name:'a2'},{name:'a3'}];
$scope.folder = {};
$scope.albumNameArray = [];
$scope.getAllSelected = function(){          
    angular.forEach($scope.folder,function(key,value){
        if(key)
            $scope.albumNameArray.push(value)
    });
}}

Gemmagemmate

hi @praveen can you answer this question #42690019 – Knorr

Answer 3

You could simply use angular filter here, also your ng-model should be album.Selected instead of folder.Selected

Html

{{(albums | filter : { Selected: true }: true)}}

Controller

$scope.albumNameArray = $filter('filter')($scope.albums, { Selected: true }, true);

Before using it in controller don't forget to add $filter in your controller

Booma

imp for me... $scope.save = function() { } $scope.read = function() {} suppose I want to call save function from read..because when I am doing I get save() not defined.. I am doing in this way $scope.read = function() { save(); } – Linseed

@Chetan as both method in scope then it should be $scope.read = function() { $scope.save(); } – Booma

I have 2 configurations in my routeConfig.. one is $routeProvider. when('/albums', { templateUrl: 'xyz.html', controller: 'getAlbumsCtrl' }) .when('/Album/:AlbumName', { templateUrl: 'xyz.html', controller: 'getAlbums12Ctrl' }) in getAlbums12Ctrl(), I am colllecting AlbumName is $routeParams, but what I need is whatever follows Album/* please collect it in AlbumName($routeParams) @Pankaj like this ** /albums/bollywood >>(AlbumName = "bollywood")** */albums/bollywood/old >> (AlbumName = "bollywood/old)" /albums/ – Linseed

Answer 4

If you want to get the value printed.
You can use like :

input type="checkbox" ng-model="checkboxModel.value2" ng-true-value="'YES'" ng-false-value="'NO'" 

Charinile