CODEWITHSUNDEEP
angularjs
trudesign
trudesign

Reputation: 117

Using ng-show to determine if the model/scope has content

I'm attempting to use ng-show to show/hide labels if content for that label doesn't exist. So for example, if I entered my phone number into the model, then the "Phone:" label would show with the actual number following. It seems though, that ng-show is evaluating the scope/model, not as true/false on the basis of content/no-content...it just seems to evaluate it as false. How do I write it to evaluate on content, not boolean?

<input type="text" ng-model="data.product.user.phone" />
<div ng-show="data.product.user.phone">
   <div>Phone:{{data.product.user.phone}}</div>
</div>

I'm really bad at fiddlin' so forgive the shitty fiddle, that doesn't work at all. http://jsfiddle.net/xVZHL/2/

UPDATE: So the fiddle works. But my source code, does not. The only difference is that we are generating and saving the model on backend/elsewhere so it is not being created and controlled on the main page, but it's just not working...I don't know how to show this in a fiddle. Here is my live code that doesn't work. 

<field ng-show="data.product.phone" for="phone" model="data.product.phone" placeholder="Phone" type="field-view"> </field>

field is a directive that has the attributes for, model, and placeholder that it injects into the templates/directives within. data.product.phone, for the purposes of this example, definitely has content in it, but does not show up, even though it should, because in the words of angular content = 'truthy'

Upvotes: 0

Views: 3893

Answers (3)

trudesign
trudesign

Reputation: 117

UPDATE(ANSWERED):: http://github.com/angular/angular.js/issues/2500 http://groups.google.com/forum/#!msg/angular/FqvC0ciG08w/k7KkyJu7zNoJ Through some more googling, I've found that a directive with an isolate scope, it evaluates it as the isolate scope, so since my scope was already data.product.phone, it was looking at data.product.phone in the scope of data.product.phone, which doesn't exist so it was throwing a wrench in the gears. Putting the ngshow in the template the directive calls works fine, plus less code in the directive calls. Thanks guys!

Upvotes: 0

manel.perez
manel.perez

Reputation: 1

The field tag is not closed correctly

<field ng-show="data.product.phone" for="phone" model="data.product.phone" placeholder="Phone" type="field-view" </field>

Should be:

<field ng-show="data.product.phone" for="phone" model="data.product.phone" placeholder="Phone" type="field-view"> </field>

Upvotes: 0

Nikos Paraskevopoulos
Nikos Paraskevopoulos

Reputation: 40298

Like all HTML attributes, you need the = in ng-show:

<div ng-show="data.product.user.phone">

And correcting the fiddle, it works: http://jsfiddle.net/xVZHL/2/

Upvotes: 1

Related Questions