2017-06-09 103 views
0

請分享我有關如何解決的詳細信息。我有兩個按鈕登錄和註冊點擊登錄按鈕時出現用戶名和密碼並提交按鈕,但我希​​望登錄和註冊按鈕隱藏。如何隱藏登錄按鈕後點擊按鈕

var app=angular.module('myApp',[]); 
 
app.controller('myController',function($scope,myService){ 
 
    $scope.resta={}; 
 
    $scope.save=true; 
 
    $scope.redirect=function(){ 
 
    
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script> 
 
<body ng-app="myApp" ng-controller="myController" > 
 
    <div class="container" class="form-group" ng-show="login"> 
 
    <label>Username:</label><input ng-model="username" class="form-control" 
 
    placeholder="Enter your username"> 
 
    <label>Password:</label><input type="password" ng-model="password" 
 
    class="form-control" placeholder="Enter your password"> 
 
    <button class="btn btn-primary" ng-click="redirect()" >Logging in</button> 
 
    </div> 
 
    <div class="container" class="form-group" ng-show="signup"> 
 
    <label>Name:</label><input ng-model="resta.name" class="form-control" 
 
    placeholder="Enter your name"> 
 
    <label>Mobile:</label><input ng-model="resta.mobile" class="form-control" 
 
    placeholder="Enter your number"> 
 
    <label>EmailId:</label><input ng-model="resta.email" class="form-control" 
 
    placeholder="Enter your email"> 
 
    <label>Password:</label><input ng-model="resta.password" class="form- 
 
    control" 
 
    placeholder="Enter your password"> 
 
    <button class="btn btn-primary" ng-click="save()" >Registering</button> 
 
    </div> 
 
    <button ng-click="login=true" >Login</button> 
 
    <button ng-click="signup=true">SignUp</button> 
 
</body>

回答

1

使用NG隱藏或NG秀來基於範圍變量元素的可見性。

https://docs.angularjs.org/api/ng/directive/ngHide

var app = angular.module('myApp', []); 
 
app.controller('myController',['$scope', function($scope) { 
 
    $scope.login = false; 
 
    $scope.signup = false; 
 
    $scope.resta = {}; 
 
    $scope.save = true; 
 
    $scope.redirect = function() {} 
 
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="myApp" ng-controller="myController"> 
 
    <div class="container" class="form-group" ng-show="login"> 
 
    <label>Username:</label> 
 
    <input ng-model="username" class="form-control" placeholder="Enter your username"> 
 
    <label>Password:</label> 
 
    <input type="password" ng-model="password" class="form-control" placeholder="Enter your password"> 
 
    <button class="btn btn-primary" ng-click="redirect()">Logging in</button> 
 
    </div> 
 
    <div class="container" class="form-group" ng-show="signup"> 
 
    <label>Name:</label> 
 
    <input ng-model="resta.name" class="form-control" placeholder="Enter your name"> 
 
    <label>Mobile:</label> 
 
    <input ng-model="resta.mobile" class="form-control" placeholder="Enter your number"> 
 
    <label>EmailId:</label> 
 
    <input ng-model="resta.email" class="form-control" placeholder="Enter your email"> 
 
    <label>Password:</label> 
 
    <input 
 
     ng-model="resta.password" 
 
     class="form-control" 
 
     placeholder="Enter your password" 
 
    > 
 
    <button class="btn btn-primary" ng-click="save()">Registering</button> 
 
    </div> 
 
    <button ng-click="login=true" ng-hide="login">Login</button> 
 
    <button ng-click="signup=true" ng-hide="signup">SignUp</button> 
 
</body>

+0

它的工作原理,謝謝:) –

+0

你可以標記爲已解決? –

+0

['$ scope',]工程?? –

0

給你的按鈕ID和使用JavaScript或者jQuery來隱藏它們。

純JavaScript

<button id="loginButton" ng-click="login=true">Login</button> 
<script> 
    document.getElementByID("loginButton").style.display = "none"; 
</script> 

jQuery的

<button id="loginButton" ng-click="login=true">Login</button> 
<script> 
    $("#loginButton").hide(); 
</script> 
+0

使用jQuery修改DOM角狀態,嚴重阻礙。當你有Angular時幾乎從不需要JQuery,並且兩者都會增加加載時間。 –

+0

好點,給他更多的選擇。 – erichunt