how to check checkbox whether true or false in angularjs using index value

Question

I have checkbox inside the ng-repeat I want check whether checkbox is checked or not using their index value

html

<div ng-repeat="Name in Names">
    <input type="checkbox" 
           ng-change="checkchange(Name .MaterialStream, $index)"
           ng-model="Name.MaterialStream" />
</div>

controller

$scope.checkchange=function(index){
      $scope.Names[index].active='true';
}

Now I get correct value when I check the checkbox. I have to get active value is true but I have check means active should be change into false in my case it's true here I attached my code help how to do this.

What exactly are you trying to achieve here? Also is there a reason you pass the $index instead of the actual model you want to change? — Philipp Meissner
– Philipp Meissner, Commented May 9, 2017 at 9:53
when i check the checkbox i want to show true else false using index — jose
– jose, Commented May 9, 2017 at 9:54

Pengyy · Accepted Answer · 2017-05-09 10:30:24Z

2

you can bind Name.active directly without using ng-repeat.

<div ng-repeat="Name in Names">         
  <input type="checkbox" ng-model="Name.active" />
</div>

Since you are binding Name.MaterialStream to checkbox, you can set Name.active based on it in ng-change.

$scope.checkchange=function(index){
  $scope.Names[index].active = $scope.Names[index].MaterialStream;
}

edited May 9, 2017 at 10:30

answered May 9, 2017 at 10:03

Pengyy

38.3k15 gold badges85 silver badges73 bronze badges

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

8 Comments

jose Over a year ago

there is no way show any new scope value like active?

Pengyy Over a year ago

@jose In your code, by $scope.Names[index].active='true'; you are trying to update active property. isn't it?

jose Over a year ago

$scope.Names[0].active=true/false i create dynamic like this @Pengyy

Pengyy Over a year ago

@jose sorry.....not at all. maybe we should chat. chat.stackoverflow.com/rooms/143769/angularjs-checkbox-ng-click

jose Over a year ago

stackoverflow.com/questions/43972984/… @Pengyy help

|

anoop · Accepted Answer · 2017-05-09 10:02:02Z

1

ng-model is more than enough to store true false for checkbox, you don't require $index at all, but If you must do it by $index, then also you can utilize the ng-model.

See this Fiddle example out of your code.

In addition: in your above code, definition of checkchange() method doesn't accept the first argument, thats an issue. you shouldn't pass it if you not going to consume it.

answered May 9, 2017 at 10:02

anoop

3,8222 gold badges18 silver badges28 bronze badges

Comments

georgeawg · Accepted Answer · 2017-07-16 03:03:17Z

1

To get the value of your checkbox, you simply have to return the model itself.

HTML

<div ng-repeat="Name in Names">
    <input type="checkbox" ng-change="checkchange($index)"
           ng-model="Name.MaterialStream" />
</div>

JS

$scope.checkchange=function(index){
    return $scope.Names[index].MaterialStream;
}

Note that I removed the first argument you passed to the checkchange function as it wasn't used before. In fact, before you checked the index variable but it wouldn't hold the real $index-value.

edited Jul 16, 2017 at 3:03

georgeawg

49k13 gold badges78 silver badges98 bronze badges

answered May 9, 2017 at 10:01

Philipp Meissner

5,4925 gold badges38 silver badges61 bronze badges

6 Comments

jose Over a year ago

no @philip i need that active scope not use model name :(

Philipp Meissner Over a year ago

That active attribute does not hold the value of your model though.

jose Over a year ago

i create active scope in run time

Philipp Meissner Over a year ago

I really do not see the point what you want to achieve. Do you want to have the active attribute hold the models state (true/false)? If so, you just need to change the ng-model as described in @Pengyys answer.

jose Over a year ago

my ng-model is look like this how to i call ng-model="selection.id[BFMaterialStream.MaterialStream]"

|

georgeawg · Accepted Answer · 2017-07-16 03:06:34Z

Here is your Solution . With working example

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Names = [{value : true}, {value : true},{value : false},{value : false},{value : true}]
        $scope.toggleSelection = function(x,index,event) {
          // how to check if checkbox is selected or not
          //alert(index + ' is ' + event.target.checked);  
          $scope.Names[index].Active = $scope.Names[index].value;
        };
});

<body ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="Name in Names">
   {{$index}}
   <input type="checkbox" id="" name="check_box" 
          value="{{x}}"
          ng-change="toggleSelection(x.value,$index,$event)"
          ng-model="Name.value" > {{Name.Active}}
  </div>
  
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

Collectives™ on Stack Overflow

how to check checkbox whether true or false in angularjs using index value

html

controller

4 Answers 4

8 Comments

Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

html

controller

4 Answers 4

8 Comments

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related