AngularJS : ng-model directive

Issue

Consider the code given below :

<li ng-repeat="task in tasks track by $index" >
    <input ng-model="task.completeStatus" ng-click="updateOnClick()"
           type="checkbox" 
           style="margin-right: 20px;" />
    <span class="{{task.completeStatus}}" ng-dblclick="editTaskMessage()" 
          contenteditable="false" ng-model="task.taskMessage"
          ng-keydown="enterEdit()">
      {{task.taskMessage}}
    </span>
</li>

My problem is, how can I access the ng-model="task.completeStatus" in the controller...? ( I tried to access the value returned from the ng-model in the controller as $scope.task.completeStatus but gives an error as TypeError: Cannot read property 'completeStatus' of undefined ) and can the ng-model directive be used to overwrite or modify currently existing values in the tasks array inside the controller.??

Solution

1. In your first question, you are getting the error because you are trying to access the property of array inside array without its index.

You can access the "task.completeStatus" in the controller by passing the $index of the array in tasks as below

ng-click="updateOnClick($index)"

And in the controller, you can access the "task.completeStatus" as below

function updateOnClick(index){
   var completeStatus = $scope.task[index].completeStatus);
}

2. Yes, you can modify the values present in task array in the controller, as ng-model provides two way binding of variables which means that you can change the value of the angular variable from the controller as well as from HTML.

Answered By - Ajinkya Bodade