Store the value of Checked checkbox in a variable using Angular JS

Question

I have created group of checkbox using ng-repeat using the below days object value.

$scope.config = { days: [
             {name:'Monday'},
             {name:'Tuesday'},
             {name:'Wednesday'},
             {name:'Thursday'},
             {name:'Friday'},
             {name:'Saturday'},
             {name:'Sunday'},
        ]}
});

My checkbox using ng-repeat is like that.

<ul class="list-inline">
<li ng-repeat="day in config.days">
    <div class="checkbox">   
        <label class="xsm-label">
            <input type="checkbox" ng-model="day.selected" value="{{day.name}}" id="cs_select_{{day.name}}" name="selected_days" />&nbsp;{{day.name}}
        </label>
    </div>
</li>
</ul>

I tried much but no luck, kindly help me how to store value of checked checkbox value in a variable.

Thank you.

what's working? what does it display? maybe it's because the ".selected" property does not exist on your days... — Julo0sS
– Julo0sS, Commented May 26, 2017 at 5:31

Dhaval Marthak · Accepted Answer · 2017-05-26 05:40:13Z

3

You may need to use ng-change directive to execute the on change method of the check box, Inside a function you can store checked values

$scope.selected = function(day, index) {
    day.selected ? $scope._selected.push(day.name) : $scope._selected.splice(index, 1)
}

Your html should look like following:

 <li ng-repeat="day in config.days">
    <div class="checkbox">
        <label class="xsm-label">
          <input type="checkbox" ng-model="day.selected" value="{{day.name}}" id="cs_select_{{day.name}}" 
          name="selected_days" ng-change="selected(day, $index)"/>&nbsp;{{day.name}}
                                          ^^^^^^^^^This ^^^^^^^^^
        </label>
    </div>
 </li>

Working Plunkr

answered May 26, 2017 at 5:40

Dhaval Marthak

17.4k6 gold badges48 silver badges69 bronze badges

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

Comments

Hadi · Accepted Answer · 2017-05-26 05:38:25Z

It's OK. You can get selected value by loop on config.days array and get the item that selected is true.

var app = angular.module('app', []);

app.controller('main', ['$scope', function($scope){
  $scope.config = { days: [
             {name:'Monday'},
             {name:'Tuesday'},
             {name:'Wednesday'},
             {name:'Thursday'},
             {name:'Friday'},
             {name:'Saturday'},
             {name:'Sunday'},
        ]};
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

  <div ng-app="app" ng-controller="main">
<ul class="list-inline">
<li ng-repeat="day in config.days">
    <div class="checkbox">   
        <label class="xsm-label">
            <input type="checkbox" ng-model="day.selected" value="{{day.name}}" id="cs_select_{{day.name}}" name="selected_days" />&nbsp;{{day.name}}
        </label>
    </div>
</li>
</ul>  
<pre>{{config.days | json}}</pre>

</div>

Sajal · Accepted Answer · 2017-05-26 05:38:42Z

You could use ng-change, whenever a checkbox is checked, update the variable with new value.

Below line of code will keep the last selected checkbox, you could replace it with an empty string if necessary.

$scope.selectedDay= day.selected ? day.name : $scope.selectedDay;

var app = angular.module("MyApp", []).controller("MyCtrl", function($scope) { 

  $scope.config = { days: [
             {name:'Monday'},
             {name:'Tuesday'},
             {name:'Wednesday'},
             {name:'Thursday'},
             {name:'Friday'},
             {name:'Saturday'},
             {name:'Sunday'},
        ]};
        
        
  $scope.storeValue = function(day) {
    $scope.selectedDay= day.selected ? day.name : $scope.selectedDay;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="MyApp" ng-controller="MyCtrl">
<ul class="list-inline">
<li ng-repeat="day in config.days">
    <div class="checkbox">   
        <label class="xsm-label">
            <input type="checkbox" ng-model="day.selected" value="{{day.name}}" id="cs_select_{{day.name}}" name="selected_days" ng-change="storeValue(day)" />&nbsp;{{day.name}}
        </label>
    </div>
</li>
</ul>

{{selectedDay}}
</body>

Jose Fuentes · Accepted Answer · 2017-05-26 05:59:17Z

Include in your input directive ng-change="onChange(day)":

<input type="checkbox" ng-model="day.selected" id="cs_select_{{day.name}}" name="selected_days" 
            ng-change="onChange(day)"/>&nbsp;{{day.name}}

Then, in your controller, define a function as:

        $scope.onChange = function(day) {

            $scope.lastSelectedDayValue = day.selected ? day.name : '';

            $scope.allSelectedDays = $scope.config.days.filter(function(day){ 
                                                        return day.selected 
                                                    }).map(function(day){
                                                        return day.name 
                                                    });
        }

You will have in $scope.lastSelectedDayValue the last day where you clicked, and in $scope.allSelectedDays an array with all days that are selected in the current moment.

Rohìt Jíndal · Accepted Answer · 2017-05-26 08:50:48Z

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.config = { days: [
             {name:'Monday'},
             {name:'Tuesday'},
             {name:'Wednesday'},
             {name:'Thursday'},
             {name:'Friday'},
             {name:'Saturday'},
             {name:'Sunday'},
        ]};
        
    var arr = [];    
    $scope.getSelected = function(selectedDay) {
      if(arr.indexOf(selectedDay) == -1) {
        arr.push(selectedDay);
      }
      console.log(arr);
    }
   
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <ul class="list-inline">
<li ng-repeat="day in config.days">
    <div class="checkbox">   
        <label class="xsm-label">
            <input type="checkbox" ng-model="selectedDay" value="{{day.name}}" id="cs_select_{{day.name}}" name="selected_days" ng-change="getSelected(day.name)"/>&nbsp;{{day.name}}
        </label>
    </div>
</li>
</ul> 
</div>

Collectives™ on Stack Overflow

Store the value of Checked checkbox in a variable using Angular JS

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related