2014-04-23 54 views
0

Iam對於angularjs和jquery mobile來說比較新。我被要求爲我的下一個項目研究這些框架,所以Iam試圖實現某些功能。我創建了一個頭版,一個元素被隱藏起來,這個頁面會顯示在最初。然後點擊登錄,用戶將被重定向到登錄頁面,在那裏他提供用戶名密碼登錄。然後他將被重定向到相同的首頁,但我想隱藏元素是visible.Can你幫我this.My元素總是隱藏,我無法弄清楚什麼蔭做wrong.The標籤與喜迎賓用戶文本必須是登錄後可見在用戶用angularjs登錄後顯示一個隱藏的元素

這裏是我的html前頁面

<div data-role="page" id="panel-responsive-page1" data-title="Panel responsive page" data-url="panel-responsive-page1"> 
<div role="main" class="ui-content"> 
       /**some content **/ 
      <div class="ui-grid-solo" ng-controller="LoginCtrl" > 
       <p ng-hide="userWelcome">Hi welcome User </p> 
      </div> 
     </div> 
    <div data-role="panel" id="nav-panel"> 
      <ul data-role="listview"> 
       <li><a href="#login-form">Login</a></li> 
       <li><a href="#">Register</a></li> 
      </ul> 
     </div> 
    </div> 

在點擊登錄,我將被重定向到登錄頁面

<div data-role="page" id="login-form"> 
     <!-- header --> 
     <div data-role="header" class="backgroundColorPink"> 
      <h1>Login Form</h1> 
     </div> 
     <!-- Form Content --> 
     <div role="main" class="ui-content jqm-content"> 
      <form class="userform"> 
       <h2>Login</h2> 
       <label for="name">Username:</label> 
       <input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true" ng-model="userDetails.name"> 
       <label for="password">Password:</label> 
       <input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true" ng-model="userDetails.password"> 
       <div class="ui-grid-a" ng-controller="LoginCtrl"> 
        <div class="ui-block-a"><a href="#" data-rel="close" class="ui-btn backgroundColorPink ">Cancel</a></div> 
        <div class="ui-block-b "><a href="#" class="ui-btn backgroundColorPink" ng-click="userLogin()">Save</a></div> 

       </div> 

      </form> 
     </div> 
    </div> 

在點擊保存,我會isssue一個Ajax調用,並在成功登錄,我將被重定向到頭版,我的登錄元素必須可見。

赫斯我控制器

angular.module('jQMDemo', []) 


function LoginCtrl($scope,$http,$window) { 
$scope.userWelcome=true; 
$scope.userLogin = function() { 



    var data={username: $scope.userDetails.name, password: $scope.userDetails.password, callfrom: "Portal"} ; 
     $http.post('url',data).success(function(data,status) { 
      alert(data.status); 
        if(data.status=="success"){ 
         $window.location.href='#panel-responsive-page1'; 
         $scope.userWelcome=false; 
        } 

     }); 

    } 
} 

我可能會使用控制器錯誤或NG-hide..Please幫助也許錯的使用,我不能弄明白

+1

''

//codes
1 - 如果在你的控制器否則將留隱患 存在elemtn這將顯示2-你可以使用它,所以當你點擊按鈕,如果一切都很好,用戶登錄你創建的元素,然後讓班級控制器爲你做的工作 –

回答

1

的工作,我實現的功能使用toggleclass 我在控制器中添加以下代碼:

$(".userWelcome").toggleClass("show"); 

在我的HTML這

<div class="ui-grid-solo hide userWelcome backgroundColorPink " > 
    <p class="alignMiddle ">Hi welcome {{userDetails.name}} </p> 
</div> 

我能得到所需的result.If任何人有任何其他的方式來實現這一目標,請建議

1
<div ng-show="element.show"> 
    <!--codes--> 
</div> 
  1. 這將顯示該元素是否存在於您的控制器中否則它會保持隱藏狀態

  2. 你可以利用這一點,所以當你點擊按鈕,如果一切 好,用戶登錄ü創建元素,然後讓 類控制器爲你做

+0

你能告訴我如何在控制器。謝謝你的答案 – ShinyJos