Error: [$parse:syntax] when passing values as parameter in angular controller method

Question

I get an error in my developer console as such:

Error: [$parse:syntax] http://errors.angularjs.org/1.6.5/$parse/syntax?p0=%7B&p1=invalid%20key&p2=43&p3=GetTimelineByUserIdAndProjectId(u.UserId%2C%7B%7BselectedProject.Id%7D%7D)&p4=%7BselectedProject.Id%7D%7D)

angular

$scope.GetTimelineByUserIdAndProjectId = function (userId, projectId) {
   alert(userId +"-"+projectId);
}

HTML

<div class="active tab-pane" id="view_projects">
<div>
    <form class="form-inline">

        <select ng-model="selectedProject" class="selectpicker" data-live-search="true"
                ng-options="s.Description for s in allProjects track by s.Id"
                ng-change="getProjectsByUserId(selectedProject.Id)"
                select-picker></select>

        <select ng-model="selectedDeveloper" class="selectpicker" data-live-search="true" ng-options="u.ID as u.FullName for u in allUsers" select-picker></select>
    </form>
</div>
<br/>
<div >
    <div class="panel panel-default" style="width:25%" ng-show="showUserTable">
        <div class="panel-body">
            <table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>Developers for {{selectedProject.Description}}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="u in usersByProjectId">
                        <td ng-click="GetTimelineByUserIdAndProjectId(u.UserId,{{selectedProject.Id}})"><a href="javascript:void(0);"> {{u.Developer}}</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

I should be able to get the "alert" when I click on the list. If I just get the u.userId I am actually able to get the alert with the value but when I add the {{selectedProject.Id}} that's when I get the error.

Why did you add the expression brackets ({{ }}) around selectedProject.Id but not u.UserId? Expressions aren't valid as function parameters, remove the brackets and it should work. The fact that u.UserId worked without them should be a strong clue that they aren't needed / won't work. — Claies
– Claies, Commented Dec 7, 2017 at 2:10
Oh! I see. I was thinking that using expression without bracket only works if it is directly inside the ng-repeat. Now I know. Thank you. — stack questions
– stack questions, Commented Dec 7, 2017 at 2:15

Fasid Mpm · Accepted Answer · 2017-12-07 02:14:31Z

1

Inside ng-click you don't need to put interpolation because you are already entering expression. We give {{interpolation}} to write expressions in HTML. In your case ng-click is already an expression so it you don't need that {{}} there in ng-click. you give GetTimelineByUserIdAndProjectId(u.UserId,selectedProject.Id)

answered Dec 7, 2017 at 2:14

Fasid Mpm

5577 silver badges11 bronze badges

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

1 Comment

Fasid Mpm Over a year ago

Pleasure is mine!!

Collectives™ on Stack Overflow

Error: [$parse:syntax] when passing values as parameter in angular controller method

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