HTML로그인 후 헤더가 변경 되는 공통점 이 있습니다.
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand"></h3>
<ul class="nav masthead-nav">
<li class="active" ng-show="NotLoggedIn" ><a href="#/login">Login <b>|</b></a></li>
<li ng-show="NotLoggedIn"><a href="#/register">Register</a></li>
<li class="active" ng-show="LoggedIn" ><a href="#/login">Welcome {{UserName}}<b>|</b></a></li>
<li ng-show="LoggedIn" ><a href="#/register">LogOut</a></li>
</ul>
</div>
</div>
<div ng-view class="mailContent">
</div>
app.js
app.config(function($routeProvider){
$routeProvider.when('/',{
templateUrl : 'template/home.html',
controller : 'HomeController'
})
.when('/login',{
templateUrl :'template/login.html',
controller : 'LoginController'
})
.otherwise({ redirectTo :'/'});
});
로그인이 성공 NotLoggedIn하면 숨겨지고 LoggedIn표시되어야합니다. 이 시나리오를 달성하는 방법.
ng-ifAngularJS에서 사용할 수 있습니다 . 에 대한 부울 값을 할당해야합니다 ng-if. 값 false이 있는 DOM이 제거되고 가지고있는 DOM이 true표시되도록
<ul class="nav masthead-nav">
<li class="active" ng-if="NotLoggedIn" >
<a href="#/login">Login <b>|</b></a>
</li>
<li ng-if="NotLoggedIn">
<a href="#/register">Register</a>
</li>
<li class="active" ng-if="LoggedIn" >
<a href="#/login">Welcome {{UserName}}<b>|</b></a>
</li>
<li ng-if="LoggedIn" >
<a href="#/register">LogOut</a>
</li>
</ul>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다