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
– Tony Barnes, Commented Apr 16, 2015 at 14:02
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
– jjay225, Commented Apr 16, 2015 at 14:06
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
– Tony Barnes, Commented Apr 16, 2015 at 14:07
Thanx Tony, I'll try ng-switch and see if I can get that working nicely. — jjay225
– jjay225, Commented Apr 16, 2015 at 14:09

Tony Barnes · Accepted Answer · 2015-04-16 15:34:03Z

1

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

edited Apr 16, 2015 at 15:34

answered Apr 16, 2015 at 14:18

Tony Barnes

2,6431 gold badge21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

jjay225 Over a year ago

Thanx Tony. I would need something like the above. I edited my answer. Please check.

jjay225 Over a year ago

Thanx for your help Tony, appreciate it but this is a lost cause I tell you, probably something stupid I'm doing. Here's a jsFiddle with my AngularJS and html: jsfiddle.net/zxw2hcta

Tony Barnes Over a year ago

@jjay225 pleasure, I don't think I can help you anymore. Really hard to debug without being there in person, especially since you have a lot of api dependant stuff. If I were you I would start the view and controller from scratch with the ng-click's and ng-show conditionals I suggested, and then combine that with your other functionality. :)

jjay225 Over a year ago

No worries, yeah it is hard to debug. Thanx tho Tony :) Cheers

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related