AngularJs ng-repeat is register two click event on checkboxes?

Question

HTML:

<div ng-app="app" ng-controller="MainCtrl">
  <span>Test App @ </span> status:{{loaded}}
<hr>

  <div ng-repeat="checkbox in checkBoxArray track by $index">{{checkbox}}
    <input name="x{{checkbox}}"  id="x{{checkbox}}" ng-click="removeCheckBox(checkbox)" type="checkbox"/>
  </div>
</div>

JS:

angular.module("app",[])
.controller("MainCtrl", ["$scope", "$timeout", function($scope, $timeout){
   $scope.checkBoxArray = ["a", "b", "c", "d", "e"]
   $scope.loaded = "loaded";

   $scope.removeCheckBox = function (value){
      $timeout(function(){
         $scope.checkBoxArray.splice($scope.checkBoxArray.indexOf(value), 1);
      }, 300)       
   }
}])

When i check checkbox a, a is removed, and b is also checked

the $timeout was just used to see if it was a timing issue

David Tang
– David Tang

2016-07-15 14:54:07 +00:00
Commented Jul 15, 2016 at 14:54 — David Tang
– David Tang, Commented Jul 15, 2016 at 14:54

Varit J Patel · Accepted Answer · 2016-07-15 14:58:12Z

2

Remove track by $index because everytime a is selected, then a is removed and that time b index will become 1 so it is getting checked.

Find the working fiddle here : https://jsfiddle.net/varit05/ytygc19t/3/

Hope it helps you!

Cheers!

answered Jul 15, 2016 at 14:58

Varit J Patel

3,5201 gold badge15 silver badges23 bronze badges

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

1 Comment

Varit J Patel Over a year ago

Glad it helps you. Please mark it correct if it solves your question :)

nmg49 · Accepted Answer · 2016-07-15 15:08:27Z

0

I think what you're experiencing is a clash between HTML checkbox functionality and Angular functionality. Try tracking the checkbox value using angular.

<li ng-repeat="item in Items">
  <label>{{item.Name}}
    <input type="checkbox" ng-model="item.Selected" ng-click="item.Selected = true" />
  </label>
</li>

And in the controller

$scope.Items = [{Name: 'bla', Selected: false}, ...]

Also, is there any particular reason you need track by $index? That could be giving you some problems as well.

answered Jul 15, 2016 at 15:08

nmg49

1,4061 gold badge13 silver badges30 bronze badges

Collectives™ on Stack Overflow

AngularJs ng-repeat is register two click event on checkboxes?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related