I have a list of elements in my Ionic 1 app. When i select one or more of them I show some buttons to modify the element in the nav-bar. I also want that the nav-bar background-color changes, but I can’t find a solution for this.
Here is my code:
<ion-nav-bar class="bar-positive" ng-if="!edit_activity">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon ink" menu-toggle="left" ng-show="!edit_activity"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-funnel ink" ng-show="is_admin && !edit_activity" ng-click="openModal(1)"></button>
<button ng-if="sync_active" class="button button-icon button-clear ion-loop ink" ng-click="loadActivity()" ng-show="!edit_activity"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-bar class="activity-edit-bg" ng-show="edit_activity">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-android-arrow-back ink" ng-click="revertSelection()" ng-show="edit_activity"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-trash-b" ng-click="deleteActivity()" ng-show="edit_activity && selected_activities.length < 2"></button>
<button class="button button-icon button-clear ion-edit" ng-click="editActivity()" ng-show="edit_activity && selected_activities.length < 2"></button>
<button class="button button-icon button-clear fa fa-gavel ink" ng-show="edit_activity" ng-click="changeToExecutedStatus()"></button>
</ion-nav-buttons>
</ion-nav-bar>
I have already tried other solutions but this is the one that seems to work the most. When I select an item in the list the navbar changes correctly but when I deselect it the buttons are not shown and the console give me this error:
TypeError: Cannot read property 'outerHTML' of null
at pre (http://localhost:8102/bower_components/ionic/release/js/ionic-angular.min.js:18:7812)
at Y (http://localhost:8102/bower_components/angular/angular.min.js:73:89)
at S (http://localhost:8102/bower_components/angular/angular.min.js:61:363)
at g (http://localhost:8102/bower_components/angular/angular.min.js:54:384)
at S (http://localhost:8102/bower_components/angular/angular.min.js:61:498)
at g (http://localhost:8102/bower_components/angular/angular.min.js:54:384)
at http://localhost:8102/bower_components/angular/angular.min.js:53:444
at http://localhost:8102/bower_components/angular/angular.min.js:55:375
at s (http://localhost:8102/bower_components/angular/angular.min.js:60:198)
at Object.fn (http://localhost:8102/bower_components/angular/angular.min.js:252:335) <ion-nav-buttons side="left" class="hide">
Could someone help me?