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!

I think you should be using eg. {{ app.fname }} instead of [[ app.fname ]], though this isn't the cause of your problem here. — Mike Chamberlain
– Mike Chamberlain, Commented Apr 15, 2014 at 12:37
@MikeChamberlain It's because I'm using Blade templates so I had to change the brackets to avoid a conflict — bencarter78
– bencarter78, Commented Apr 15, 2014 at 13:37

Mike Chamberlain · Accepted Answer · 2014-04-15 12:40:53Z

4

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.

edited Apr 15, 2014 at 12:40

Mike Chamberlain

43k28 gold badges113 silver badges160 bronze badges

answered Apr 15, 2014 at 12:33

Couturier Boris

1981 silver badge10 bronze badges

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

1 Comment

bencarter78 Over a year ago

Thanks! Worked a treat.

Collectives™ on Stack Overflow

Making an input appear using AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related