CODEWITHSUNDEEP
javascriptangularjsuser-interfaceangular-ui-router
user567
user567

Reputation: 3842

Hide element if not in the appropriate state

I have a state User where I show a list of users and a substate user.info where I show the info of one selected user in a nested view. When I show the info I want to hide the list of the users. Is it possible to do something like :

<div ng-show="currentstate==/users/">list of user ...</div>

Upvotes: 0

Views: 58

Answers (2)

timeiscoffee
timeiscoffee

Reputation: 458

You can use ng-hide and ng-show to show/hide the list of users and user info depending on the status of the selected user.

See example code below:

<div ng-hide="selectedUser">
    <ul>
        <li ng-repeat="user in users" ng-click="selectedUser = user">{{user}}</li> 
    </ul>
</div>

<div ng-show="selectedUser">{{selectedUser}}</div>

doc on ng-hide and ng-show:

Upvotes: 1

Johannes Ferner
Johannes Ferner

Reputation: 728

This answers your example:

I have the following code in my app.run method, it sets the current and previous state on the $rootScope as well as printing this information to the console.

        // State-Info
        $rootScope.previousState = null;
        $rootScope.currentState = null;
        $rootScope.fromParams = null;
        $rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from) {
            $rootScope.previousState = from.name;
            $rootScope.currentState = to.name;
            $rootScope.currentStateClass = $rootScope.currentState.split('.').join('-');
            $rootScope.fromParams = to.fromParams;
            var nAgt = navigator.userAgent;
            // Do not print version @ Unit-Tests
            if (nAgt.indexOf('PhantomJS') === -1) {
                $log.debug('%c- - - - - - - - - - - - - ', 'color: blue; font-size: 14px');
                $log.info('Previous state:' + $rootScope.previousState);
                $log.info('Current state:' + $rootScope.currentState + ' with body-class: ' + $rootScope.currentStateClass);
                $log.debug('%c- - - - - - - - - - - - -  ', 'color: blue; font-size: 14px');
            }

in your html you can then use ng-hide ng-show or ng-if to hide/show/append/remove it. Example:

<li ng-if="$root.currentState === 'main.login'">

As you see in the first example, i'm also having a currentStateClass, which converts dots to '-'. In a directive I'm using this to add it on the body, so i can also react on certain states specifically via css/scss.

Concerning your problem:

Why aren't you using to different state, a listing and a detail state? If so, how do you even get the list in both states (assuming different templates)?

Upvotes: 0

Related Questions