Скрыть элемент, если не в соответствующем состоянии

0

У меня есть пользовательский пользователь, где я показываю список пользователей и подстанцию user.info, где я показываю информацию одного выбранного пользователя во вложенном виде. Когда я показываю информацию, я хочу скрыть список пользователей. Можно ли сделать что-то вроде:

<div ng-show="currentstate==/users/">list of user ...</div>
Теги:
user-interface
angular-ui-router

2 ответа

1
Лучший ответ

Вы можете использовать ng-hide и ng-show для отображения/скрытия списка пользователей и информации пользователя в зависимости от состояния выбранного пользователя.

См. Пример кода ниже:

<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 на ng-hide и ng-show:

Поделиться
0

Это ответ на ваш пример:

У меня есть следующий код в моем методе app.run, он устанавливает текущее и предыдущее состояние на $ rootScope, а также печатает эту информацию на консоли.

        // 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');
            }

в вашем html вы можете использовать ng-hide ng-show или ng-if, чтобы скрыть/показать/добавить/удалить. Пример:

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

Как вы видите в первом примере, у меня также есть currentStateClass, который преобразует точки в '-'. В директиве я использую это, чтобы добавить его в тело, поэтому я также могу реагировать на определенные состояния, в частности, через css/scss.

Что касается вашей проблемы:

Почему вы не используете другое состояние, листинг и состояние детали? Если да, то как вы даже получаете список в обоих состояниях (при использовании разных шаблонов)?

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню