AngularJS with ui-router ng-hide not working after initially working

Question

I've been struggling with a ng-hide issue in combination with using ui-router. Simple app. Index.html shows some data via the "notes" route, you click on "detail" and you go to the sub route "notes.note" to view the detail just below the other records. The "detail" html has a "Save" & "Cancel" button.

Now there is an "Add New" button when you are not viewing the detail with the attribute ng-hide="HideAddNew". "HideAddNew" is a $scope variable in the controller. When I click "detail" on a row I have this ng-click="toggleAddNew()" on the link which in turn calls this

    $scope.toggleAddNew= function()
    {
        $scope.HideAddNew=($scope.HideAddNew ? false : true);
    }

That works perfectly, my detail shows and my "Add New" button has disappeared. Now on the detail when I click "Cancel" it fire off the ng-click="hideData()" which calls the function:

   $scope.hideData=function()
   {
        $scope.toggleAddNew();
        $state.go('notes');
   }

And now my "Add New" has disappeared even though the variable is set to false, i.e. Don't hide. I've tried $timeout in that "hideData" function and in the "toggleAddNew" function. I've tried putting "$scope.toggleAddNew();" after the "$state.go('notes');" too. I don't want to resort to manually adding and removing classes. AngularJS ver: v1.3.15 , ui-router ver: v0.2.13 Thanx all :)

EDIT Would the below work Tony?

 <button ng-if="HideAddNew" ng-click="SelectRoute('notenew')" class="btn btn-primary">
<span class="glyphicon glyphicon-plus -glyphicon-align-left"></span>Add New</button>

Maybe you could use ng-switch in the template instead of the $scope.HideAddNew you have in the controller right now? Alternatively, you could try adding $scope.HideAddNew = false; in the hideData function. — Tony Barnes
I've tried adding "$scope.HideAddNew = false;" into the "hideData" function but that doesn't work. I have not yet tried ng-switch tho... — jjay225
Hard to debug without seeing it an action. It sounds like ng-switch would be more elegant for your situation though. docs.angularjs.org/api/ng/directive/ngSwitch — Tony Barnes
Thanx Tony, I'll try ng-switch and see if I can get that working nicely. — jjay225

Tony Barnes Tony Barnes · Accepted Answer · 2015-04-16T14:18:45

Perhaps you could simplify and use ng-switch instead.

Something like this:

<ul ng-switch="expression">
  <li ng-switch-when="firstThing">my first thing</li>
  <li ng-switch-when="secondThing">my second thing</li>
  <li ng-switch-default>default</li>
</ul>

Alternatively, maybe you could use ng-if or ng-show instead of ng-hide, eg:

<p ng-if="HideAddNew">it's here!</p>
<p ng-if="!HideAddNew">it's not here.</p>

Edit

If I understand what you're trying to achieve exactly, I would use ng-show with an ng-click:

Controller:

$scope.addNew = false;

View:

<button ng-show="!addNew" ng-click="addNew = true">Add New</button> 

<button ng-show="addNew" ng-click="save()">Save</button>
<button ng-show="addNew" ng-click="addNew = false">Cancel</button>

Example

AngularJS with ui-router ng-hide not working after initially working

1 Answers