logical expression in ng-show value

[Steve Pruitt]

I need to show a block based on the values for two properties.

The two properties...

variables.Ques.OtherInsAndAppSame is initialized to 'yes' and variables.Ques.SwlFptJap is initialized to 'no'.

I was hoping I could something as simple as...

<div ng-show="variables.Ques.OtherInsAndAppSame == 'no' && variables.Ques.SwlFptJap == 'yes'">

        :

        :

</div>

The block initially does not show as expected from the initial values.  But when I toggle (via radio buttons) variables.Ques.OtherInsAndAppSame to 'no' and variables.Ques.SwlFptJap to 'yes', the block still does not show.

 I am avoiding a $watch function for reasons beyond this post.  If I have to use a $watch so be it.  But something inline is preferable.

[Brian Marco]

Hi Steve,

I think ngSwitch might be something that can help you here.

See the following for more info:

http://docs.angularjs.org/api/ng.directive:ngSwitch

--

B

[Steve Pruitt]

Brian,

Thanks for the reply.

The ng-switch looked promising on first blush, but my core issue is there are two properties involved for showing the div.  Unless I am missing something, I would need to duplicate the div twice.  One div for each -when clause.  I can do that, but a more compact solution is ideal of course.

On Wednesday, July 10, 2013 11:29:22 AM UTC-4, Steve Pruitt wrote:

[Brian Marco]

Ahh I see.

One other option that might work for you would be to encapsulate the conditional processing within your controller, and expose the final outcome via the scope.  Said another way, move most of the decision logic out of the template and into the controller.

Another option would be to make use of the newer ngIf directive.  See the following for more info:

http://code.angularjs.org/1.1.5/docs/api/ng.directive:ngIf

Note however that that directive is not available in the production ready version of AngularJS.  From what I could tell I only found it in 1.1.5.

I had a similar need to yours a while back and due to the nature of what I was working on at the time I was comfortable using 1.1.5.  The ngIf directive worked as advertised if I recall correctly.  However as I moved forward with what I was working on I moved back to 1.0.7 and replaced my code with additional processing in the controller + utilization of the ngSwitch directive.  Maybe not the most ideal solution in the grand scheme of things but for me it was a small part of the overall solution.

Sorry for the long winded reply.  Hope some of that somewhat helps.

--

B

[Steve Pruitt]

Without going to much into things. I am recreating an existing app (non-html) in the html + AngularJS. I love AngularJS's data binding and other virtues which is why I chose it. The exiting app has a rule processor available, essentially if/then statements for determining whether something is displayed or not. Simple rules with a single variable map OK to the $watch. Things get complicated with more complicated rules.

I've decided to try converting rule logic to a function which when the conditions are met toggle a property to true. I will use the Boolean property to control the div via ng-show, I am back to it. I will trigger the function with a ng-change directive on those tags whose model contributes to the rule logic.

We will see.

[Brian Marco]

Sounds a bit tricky. :)

Best of luck.  Would love to help further if you want to post up some code on Plunker or jsfiddle in the future. 

--
B

From: Steve Pruitt Sent: Thursday, July 11, 2013 11:36 AM To: ang...@googlegroups.com Reply To: ang...@googlegroups.com Subject: [AngularJS] Re: logical expression in ng-show value

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/HlfYO7UJwKQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.