Search code examples
angularjsasp.net-mvccheckboxlist

How to set selected checkbox in checkbox list based on value in angularJs with MVC


I want to set as selected few hobbies like 'Writing','Football' in checkbox list how to do this? my code as below,

angular controller

$scope.Hobbies = [];
$scope.Hobbies.push('Cricket');
$scope.Hobbies.push('Reading');
$scope.Hobbies.push('Writing');
$scope.Hobbies.push('Sleeping');
$scope.Hobbies.push('Running');
$scope.Hobbies.push('Football');
$scope.Hobbies.push('Programming');

$scope.selected = {};    
$scope.GetSelected = function () {        
    console.log('selected arry....');       
    $.each($scope.selected, function (value,checked) {
        console.log(value + '-' + checked);
    });
};

 $scope.SetSelected = function () {        
   //???
};

my .cshtml code

 <div><b>Hobbies</b>
                        <label ng-repeat="hobbie in Hobbies">                                
                            <input type="checkbox"
                                   checklist-model="Hobbies"
                                   ng-model="selected[hobbie]"                                      
                                   checklist-value="{{hobbie}}">{{hobbie}}                               
                        </label>
                    </div>
<a href="javascript:;" data-ng-click="SetSelected();">Set Selected</a>

Solution

  • You can define your list something like this.

    $scope.Hobbies = [
         {name: 'Cricket', checked: true}, 
         {name: 'Reading', checked: false},
         {name: 'Writing'}
       ];
    

    Then bind it in your view like this:

    <label ng-repeat="hobbie in Hobbies">                                
      <input type="checkbox"  ng-model="hobbie.checked">{{hobbie.name}}
    </label>
    

    And to get selected hobbies use

    $scope.GetSelected = function () {        
        $scope.Hobbies.forEach(function (hobbie) {
            console.log(hobbie.name,  hobbie.checked);
        });
    };
    

    A working solution for reference:

    angular.module('myApp',[])
    .controller('Controller', function($scope) {
       $scope.Hobbies = [
         {name: 'Cricket', checked: true}, 
         {name: 'Reading', checked: false},
         {name: 'Writing'}
       ];
       
    $scope.GetSelected = function () {        
        $scope.Hobbies.forEach(function (hobbie) {
            console.log(hobbie.name,  hobbie.checked);
        });
    };
    
    })
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <body ng-app="myApp" ng-cloak ng-controller="Controller">
      <div><b>Hobbies</b>
        <label ng-repeat="hobbie in Hobbies">                                
                                <input type="checkbox"
                                       ng-model="hobbie.checked">{{hobbie.name}}                               
                            </label>
      </div>
      <a href="javascript:;" data-ng-click="GetSelected();">Get Selected</a>
    </body>