Angular js checkbox

Question

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>

Rayon · Accepted Answer · 2016-05-30 07:43:21Z

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>

Hadi · Accepted Answer · 2016-05-30 07:45:59Z

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>

Collectives™ on Stack Overflow

Angular js checkbox

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest