Ng-show not working inside of view-title, any help?

ionic-v1
1

I would like to use the ngShow AngularJS directive inside of the ionic view-title attribute, but it is not working.
Here is my code:

<ion-view view-title="List of Activities<span ng-show='!isEmpty(listAvtivitiesToUpdate.length)' class='item-note'>{{listAvtivitiesToUpdate.length}} queued</span>" direction="y">

isEmpty is a function declared in my rootScope, it’s working in other places but not here.
I also tried this code, just to try, but still without luck:

<ion-view view-title="List of Activities <span ng-show='listAvtivitiesToUpdate.length > 1' class='item-note'>{{listAvtivitiesToUpdate.length}} queued</span>" direction="y">

I would appreciate some help or information, maybe it’s not possible to use angular directives here…

2

im pretty sure this is not possible. you added a span element into the view-title attribute.
what do you wanne achieve?

3

The span element is working, only the ng-show is not working.
What I would like to do is show in the header the number of elements queued only when we got at least one element.

4

span into ion-view isn’t a good idea, it do’nt work.
Use instead:

two ion-header with ng-show=‘!isEmpty(listAvtivitiesToUpdate.length)’ for one and ng-show=‘isEmpty(listAvtivitiesToUpdate.length)’ for the other.

1 Like
5

Thanks @jimibi, it works :smile:

6

You could also use ionNavTitle which allows you to replace the title text with html.

<ion-view direction="y">
    <ion-nav-title>
        List of Activities<span ng-show='!isEmpty(listAvtivitiesToUpdate.length)' class='item-note'>{{listAvtivitiesToUpdate.length}} queued</span>
    </ion-nav-title>
7

I ran across this tonight (with tab titles). Elements inside of the title tag work, but ng-show is just sanitized out it seems. For instance, I want to have a title that has an error icon in it:

<ion-tab title="Recipe <i ng-hide='ctrl.valid' class='icon ion-alert-circled header-icon'></i>">

The icon will always appear because ng-hide is stripped out (but the classes and element aren’t). I overcame this by using css to hide the icon when I needed to

<ion-tab title="Recipe <i class='icon ion-alert-circled header-icon {{ctrl.valid ? 'hidden' : ''}}'></i>">

I think that having 2 tabs is a smell because there is content nested under the tabs. So duplicating that code was not an option.