Question

我有一个州用户，我在其中显示用户列表和子状态user.info，其中我在嵌套视图中显示一个选定用户的信息。当我显示信息时，我想要隐藏用户列表。是否可以做类似的事情：

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

Answer 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：

Answer 2

这回答了您的示例：

我的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对某些状态作出反应。

关于您的问题：

为什么不使用不同的州，列表和详细状态？如果是这样，你如何在两种状态下获得列表（假设不同的模板）？

如果未处于适当的状态，则隐藏元素

2 个答案: