CODEWITHSUNDEEP
javascriptangularjscheckbox
Anil
Anil

Reputation: 1

Angular js checkbox

I want to print the values of a array based on the checkbox associated with it. Find the code below

Javascript:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName= [{name:"John",selected:"false"},{name:"Anil",selected:"false"},{name:"Kumar",selected:"false"}];
    $scope.lastName= "Doe";
    $scope.name1=[],
    $scope.addname=function(){
    angular.forEach($scope.firstName, function(name,selected){
  if(selected=="true") {
  alert(name);
    $scope.name1.push(name)
  }
});
 }
 });

html:

<div ng-app="myApp" ng-controller="myCtrl">
<table >

<tr ng-repeat="first in firstName">
<td><input type="Checkbox" ng-model="first.selected">{{first.name}}</td>

</tr>
<tr><td><input type="Button" ng-click="addname()" value="Submit" ng-model="lastName"></td></tr>

<tr ng-repeat="nam in name1">{{nam}}</tr>
</table>
</div>

Upvotes: 0

Views: 56

Answers (2)

Hadi
Hadi

Reputation: 17299

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName= [{name:"John",selected:false},{name:"Anil",selected:false},{name:"Kumar",selected:false}];
    $scope.lastName= "Doe";
    $scope.name1=[];
    $scope.addname=function(){
    angular.forEach($scope.firstName, function(name){
      if(name.selected === "true") {
        $scope.name1.push(name);
      }
});
 }
 });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<table >

<tr ng-repeat="first in firstName">
<td><input type="Checkbox" ng-model="first.selected"  ng-true-value="true" >{{first.name}}</td>

</tr>
<tr><td><input type="Button" ng-click="addname()" value="Submit" ng-model="lastName"></td></tr>
<tr ng-repeat="nam in name1"><td>{{nam}}</td></tr>

</table>
</div>

Upvotes: 0

Rayon
Rayon

Reputation: 36609

  • Keep selected value as Boolean than String
  • In forEach, first argument is Object, access the model associated with it using name.selected
  • Initialize name1 array in ng-click handler

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName = [{
    name: "John",
    selected: false
  }, {
    name: "Anil",
    selected: false
  }, {
    name: "Kumar",
    selected: false
  }];
  $scope.lastName = "Doe";
  $scope.addname = function() {
    $scope.name1 = [];
    angular.forEach($scope.firstName, function(name, selected) {
      if (name.selected) {
        $scope.name1.push(name)
      }
    });
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <table>
    <tr ng-repeat="first in firstName">
      <td>
        <input type="Checkbox" ng-model="first.selected">{{first.name}}</td>
    </tr>
    <tr>
      <td>
        <input type="Button" ng-click="addname()" value="Submit" ng-model="lastName">
      </td>
    </tr>
    <tr ng-repeat="nam in name1">{{nam}}</tr>
  </table>
  {{name1}}
</div>

Upvotes: 2

Related Questions