CODEWITHSUNDEEP
javascriptangularjs
Runeaway3
Runeaway3

Reputation: 1449

Why does $index and "$scope.items[index]" need to be used to handle an item in ng-repeat?

So I am starting to learn AngularJS and I have a question as to why I need to call $index for a particular function instead of a simpler code. This is the code:

<div ng-app="myApp">
<div ng-controller='MyController'>
    <div ng-repeat="people in peoples">
    {{people.name}}
        <button ng-click="addONe($index)" class="button"> Try it </button>
        {{people.likes}}
        <button ng-click="addOne()" class="button"> Try it again </button>
        {{people.likes}}

    </div>
</div>

This is the Js:

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

app.controller('MyController', function($scope) {
  $scope.peoples=[
      {
          name: "Alek",
          age:20,
          likes:0
      },
      {
          name: "Kevin",
          age:20,
          likes:0
      }
      ],

  $scope.addOne= function(){
      $scope.peoples.likes= $scope.peoples.likes+=1
  }

  $scope.addONe= function(index){
      $scope.peoples[index].likes+=1
  }
  })

I am confused as to why my $scope.addOne function does not work properly, and why I need to call the $index instead in the correctly functioning $scope.addONe function. Essentially, why must I call that index instead of just using the other code, because I see no real errors in it (though I am new to AngularJS, so maybe I am just missing something).

(I am aware that two functions are pertaining to the same object, yet deleting the addONe function and just having the addOne function does not fix the problem as hitting the button still does not raise the count).

Upvotes: 2

Views: 431

Answers (2)

PSL
PSL

Reputation: 123739

You do not need to, in your case you only need to pass the object person and work on it.

i.e

$scope.addOne= function(people){
   people.likes += 1;
   //Or without passing people you can do the below, this here will be child scope of ng-repeat 
   //this.people.likes += 1;
}

and

<button ng-click="addOne(people)" class="button"> Try it again </button>

When you do $scope.peoples.likes = $scope.peoples.likes+1 it is not going to work because you are not updating likes property of person, instead you are (creating and) updating likes property on the array peoples.

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

 app.controller('MyController', function($scope) {
   $scope.peoples = [{
       name: "Alek",
       age: 20,
       likes: 0
     }, {
       name: "Kevin",
       age: 20,
       likes: 0
     }],

     $scope.addOne = function(people) {

       people.likes += 1
     }

   $scope.addONe = function(index) {
     $scope.peoples[index].likes += 1
   }
 })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller='MyController'>
    <div ng-repeat="people in peoples">
      {{people.name}}
      <button ng-click="addOne(people)" class="button">Try it again</button>
      {{people.likes}}

    </div>
  </div>

Upvotes: 3

Gazler
Gazler

Reputation: 84140

The index is required as you have an array, and you wish to increment a value on that.

Calling $scope.peoples.likes = will assign the value of likes on the array object.

Calling $scope.peoples[0].likes will increment the likes count of the first value in the array. In this case 0 is your index and you have an array of 2 elements, but they are 0 indexed.

It is also worth noting that you are not calling $index - you are passing the value of $index to the function.

Upvotes: 1

Related Questions