12

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

4 Answers 4

21

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

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

5 Comments

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..
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.
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?
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/
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.
1

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

1 Comment

hi @praveen can you answer this question stackoverflow.com/questions/42689519/…
1

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

3 Comments

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(); }
@Chetan as both method in scope then it should be $scope.read = function() { $scope.save(); }
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/
0

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'" 

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.