CODEWITHSUNDEEP
angularjsangular-ui-router
jjay225
jjay225

Reputation: 518

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

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>

Upvotes: 0

Views: 179

Answers (1)

Tony Barnes
Tony Barnes

Reputation: 2643

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

Upvotes: 1

Related Questions