我有一個狀態用戶,我顯示的用戶列表和子狀態user.info,其中我顯示一個選定的用戶在嵌套視圖中的信息。當我顯示信息時,我想隱藏用戶列表。是否有可能做這樣的事情:隱藏元素,如果不是在適當的狀態
<div ng-show="currentstate==/users/">list of user ...</div>
我有一個狀態用戶,我顯示的用戶列表和子狀態user.info,其中我顯示一個選定的用戶在嵌套視圖中的信息。當我顯示信息時,我想隱藏用戶列表。是否有可能做這樣的事情:隱藏元素,如果不是在適當的狀態
<div ng-show="currentstate==/users/">list of user ...</div>
您可以使用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
:
這回答您的示例:
我在我的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,它將點轉換爲' - '。在一個指令中,我使用它來將它添加到body上,所以我也可以通過css/scss對特定的狀態做出反應。
關於你的問題:
你爲什麼不使用不同的狀態,列表及詳細的狀態? 如果是這樣,你甚至可以在兩種狀態下獲得列表(假設不同的模板)?
'ng-hide'怎麼樣?條件是'selectedUser!= null && selectedUser!== this' – fuyushimoya