Anuja Patil Anuja Patil - 1 month ago 11
AngularJS Question

angular.js: TypeError: v2.endpointsSelected is not a function

I have a multiple checkbox and on each checkbox selection i need to call a function.

HTML:

<thead md-head>
<tr md-row>
<th md-column><span><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()"/>Select</span></th>
<th md-column><span>Endpoint Name</span></th>
<th md-column><span>Endpoint Aliase</span></th>
<th md-column><span>Endpoint Protocol</span></th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-click="" md-select-id="name" ng-repeat="endpoint in endpoints | startFrom:currentPage*pageSize | limitTo:pageSize | filter: search ">
<td md-cell><input type="checkbox" ng-model="endpoint.Selected" ng-click="endpointsSelected()"/></td>
<td md-cell>{{endpoint.partName}}</td>
<td md-cell>{{endpoint.partSignalId}}</td>
<td md-cell>{{endpoint.partSignalType}}</td>
</tr>
</tbody>


JS:

$scope.endpointsSelected = function() {

angular.forEach($scope.endpoints, function(endpoint){
if(endpoint.Selected){
alert(endpoint.partName);
$scope.endpointsSelected = [];
$scope.epName = endpoint.partName;
$scope.epId = endpoint.partSignalId;
$scope.epType = endpoint.partSignalType;

$scope.endpointsSelected.push({'partName': endpoint.partName, 'partSignalType': endpoint.partSignalType, 'partSignalId': endpoint.partSignalId});
}
})

}


When I select the checkbox for the 2nd time,.. I get the error message saying v2.endpointsSelected is not a function...

Answer

Working Demo

var app = angular.module('app',[]);
app.controller('Ctrl',function($scope,$filter){
  
  $scope.data = {employee:[
    
    {'no':1,'name':'max','status':'bad'},
    {'no':2,'name':'fox','status':'good'},
    {'no':3,'name':'juno','status':'bad'},
    {'no':4,'name':'pet','status':'fair'},
    {'no':5,'name':'xyz','status':'good'},
    {'no':6,'name':'shit','status':'bad'},
    {'no':7,'name':'doggy','status':'fair'},
    {'no':8,'name':'hmmm','status':'bad'} 
  ]}
  
  $scope.selected=[];
  $scope.select = function(item){
    
    if(item.sel){
       $scope.selected.push(item.no);
      }else{
        var index = $scope.selected.indexOf(item.no);
        $scope.selected.splice(index,1);
        }
    };

   
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="Ctrl">
  <div ng-repeat="x in data.employee">
    <input type="checkbox" ng-model="x.sel" ng-change="select(x)" ng-click="x.sel"/> {{x.name}}
    </div>
  
  array - {{selected}}
  </div>

The problem is with your function code, you have assigned a function to the scope variable like $scope.endpointsSelected = function() {};.Now in $scope the $scope.endpointsSelected has a function object in it.

But look at inside your function,

$scope.endpointsSelected = function() {

        angular.forEach($scope.endpoints, function(endpoint){
              if(endpoint.Selected){
                alert(endpoint.partName);
                $scope.endpointsSelected = [];// this line is the problem..you are again assigning  the $scope.endpointsSelected to [] (array)
                $scope.epName = endpoint.partName;
                $scope.epId = endpoint.partSignalId;
                $scope.epType = endpoint.partSignalType;

                $scope.endpointsSelected.push({'partName': endpoint.partName, 'partSignalType': endpoint.partSignalType, 'partSignalId': endpoint.partSignalId});
              }
            })

      } 

You are again assigning the $scope.endpointsSelected to [] (array) which is not a function.

Solution

Either you can change your function name or change the name of array you are creating inside the function.