2017-06-09 3 views
0

Bitte teilen Sie mir Details darüber, wie zu lösen.Ich habe zwei Tasten Login und Anmeldung beim Klicken Login-Taste Benutzername und Passwort erscheint und Absenden-Taste, aber ich möchte Login und Anmeldung Schaltfläche zu verstecken.Wie Login-Taste nach dem Klicken auf Schaltfläche ausblenden

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>

Antwort

1

Verwendung ng-hide oder ng-Show, die Sichtbarkeit von Elementen auf Variablen in ihrem Umfang auf Basis zu ändern.

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

Es funktioniert, danke :) –

+0

Können Sie als gelöst markieren? –

+0

['$ scope',] funktioniert? –

0

Ihre Tasten IDs Geben und Javascript oder jQuery sie zu verstecken verwenden.

reine 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 Mit DOM Zustand in Angular zu ändern ist stark abgeraten. Sie benötigen JQuery fast nie, wenn Sie Angular haben, und beides erhöht die Ladezeiten. –

+0

Guter Punkt, gib ihm einfach mehr Optionen. – erichunt

Verwandte Themen