Making an input appear using AngularJS

Question

I'm a real AngularJS and JS noob who is trying to make an input appear when a user double clicks on an element however, I can't get it to work. Currently I have this error...TypeError: Cannot set property 'editing' of undefined

Here's my code...

var reportsControllers = angular.module('vdApp', [], function($interpolateProvider) { $interpolateProvider.startSymbol('[['); $interpolateProvider.endSymbol(']]'); }); reportsControllers.controller('ApplicantCtrl', ['$scope', '$http', function($scope, $http) { $http.get('http://myurl.com').success(function(data) { $scope.applicants = data; }); angular.forEach($scope.applicants, function() { editing: false; }); $scope.orderProp = 'dob'; $scope.editApplicant = function(applicant) { applicant.editing = true; }; $scope.doneEditing = function(applicant) { applicant.editing = true; }; }]); 

and my HTML/blade template...

<div ng-app="vdApp" ng-controller="ApplicantCtrl"> <div class="input-group spacer-bottom-2x"> <span class="input-group-btn"><button class="btn btn-default btn-lg" type="button">Filter:</button></span> <input class="form-control input-lg" ng-model="query" /> </div> <div class="table-responsive"> <table class="table table-striped table-bordered"> <thead> <tr> <th width="15%"><a href="" ng-click="orderProp='fname'">Name</a></th> <th width="10%"><a href="" ng-click="orderProp='surname'">DOB</a></th> <th width="5%">CV</th> <th width="25%"><a href="" ng-click="orderProp=''">Tel</a></th> <th width="25%"><a href="" ng-click="orderProp=''">Email</a></th> <th width="10%"><a href="" ng-click="orderProp='postTown'">Post Town</a></th> <th width="20%"><a href="" ng-click="orderProp='page_title'">Interest</a></th> <th width="10%"><a href="" ng-click="orderProp='created_at'">Applied</a></th> </tr> </thead> <tbody> <tr ng-repeat="app in applicants| filter: query | orderBy: orderProp"> <td>[[ app.fname ]] [[ app.surname ]]</td> <td>[[ app.dob ]]</td> <td><div ng-if="app.cv != ''"><a href="[[ app.cv ]]" target="_blank">View</a></div></td> <td > <span ng-hide="applicant.editing" ng-dblclick="editApplicant(applicant)">[[ app.tel ]]</span> <div class="form-group" ng-show="applicant.editing" ng-model="app.id" ng-blur="doneEditing(applicant)" autofocus> <input class="form-control input-lg" ng-model="query" /> </div> </td> <td>[[ app.email ]]</td> <td>[[ app.postTown ]]</td> <td>[[ app.page_title ]]</td> <td>[[ app.created_at ]]</td> </tr> </tbody> </table> </div> </div> 

Can anyone help me and tell me what I'm doing wrong?

Thanks!

Answer 1

You declare your repeater as ng-repeat="app in applicants" but then try ng-dblclick="editApplicant(applicant) and ng-show="applicant.editing".

applicant does not exist - you should be using your repeater loop variable app instead.