How to use ng-click with multiple expressions?

Question

I want to use ng-click to perform multiple expressions. I want to both set a value on a model, and call a method from the $scope, like this:

<a ng-click="navigation.book = book && bookSvc.showBook(book)" href="#{{book.id}}">{{book.title}}</a>

Where I have && separating the two different expressions I want to perform. I know I could just add a method that does both things in the controller. Should I just do that, or is there a way to perform two expressions directly from inside ng-click?

score 132 · Accepted Answer · edited Nov 03 '17 at 07:23

132

Simply using ';' instead of '&&' to separate the expression should work for you:

<a ng-click="navigation.book = book; bookSvc.showBook(book)" href="#{{book.id}}">{{book.title}}</a>

edited Nov 03 '17 at 07:23

Suresh Reddy Putta

13
6

answered Nov 11 '13 at 19:53

urish

8,943
8
54
75

4

Yep, that did it. I should've realized it's just code! – CorayThan Nov 11 '13 at 19:57
6

why not `ng-click="bookSvc.showBook(navigation.book = book)"` ? – sceid Feb 26 '15 at 14:47

Maxim Shoustin · Answer 2 · 2013-11-11T19:56:27.770

13

You can write only expression into ng-click.

The ngClick directive allows you to specify custom behavior when an element is clicked.

But you can write:

<a ng-click="( (navigation.book = book) && bookSvc.showBook(book))" href="#{{book.id}}">{{book.title}}</a>

In this case navigation.book gets book content.

Demo Fiddle

Reference

We have several options here to invoke navigation.book = book

What's happen if we will write:

ng-click="( bookSvc.showBook(book) && (navigation.book = book))"

In this case if (seems like bookSvc is a service) bookSvc.showBook(book) returns nothing or false, the navigation.book = book will never execute.

Demo 2 Fiddle

But if bookSvc.showBook(book) returns true the navigation.book = book will be invoked.

Demo 3 Fiddle

edited Nov 11 '13 at 19:56

answered Nov 11 '13 at 19:42

Maxim Shoustin

77,483
27
203
225

1

Nice, didn't know this form of writing. Is this just a simple JavaScript-expression or how does it work? – hugo der hungrige Nov 11 '13 at 19:46
@hugoderhungrige its angualrJS (you welcome :)) – Maxim Shoustin Nov 11 '13 at 19:47
This is pretty interesting, but Urish's suggestion is a fair bit more simple. – CorayThan Nov 11 '13 at 19:58
@CorayThan BTW, you can write as well: `ng-init = "navigation.book = book`. no worries :) – Maxim Shoustin Nov 11 '13 at 20:00

score 4 · Answer 3 · answered Nov 11 '13 at 19:55

4

I'd recommend putting all the logic in a function and just assign ng-click to it, to make the code simpler and more elegant.

answered Nov 11 '13 at 19:55

Sergei Basharov

51,276
73
200
335

It's an option, but I think it's just a matter or preference. – CorayThan Nov 11 '13 at 19:59
When you put it in the function, you only have to look inside it to find related bugs, not in two places, wondering if you have done a syntax error by missing a semicolon or a bracket in the expression. It will be just a simple and nice to eye `ng-click="bookSvc.showBook(book)"`. I agree though it's a question of preference. – Sergei Basharov Nov 11 '13 at 20:05
2

Sergey, the only time I would say it's not a good idea to put all the logic in a function is if part of that logic is very "view" centric, and does not belong in a controller, which shouldn't know too much about a view. For instance, if you have an ng-click on an "OK" button on a modal dialog you want to both 1) call the controller to save the data to the service and 2) close the dialog box. If closing the dialog is via hiding the form, you want to do that in the view. Would you agree? – zumalifeguard Mar 31 '14 at 21:13

How to use ng-click with multiple expressions?

3 Answers3

Linked