ボタンをクリックした後にログインボタンを非表示にする方法

解決方法に関する詳細を共有してください。ログインボタンのユーザー名とパスワードをクリックするとログインとサインアップのボタンが表示されますが、ログインとサインアップボタンを非表示にします。ボタンをクリックした後にログインボタンを非表示にする方法

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>

出典

2017-06-09 vikas kakubal

利用ngの非表示やNG-ショー。角度でのDOMの状態を変更するためのjQueryを使用した

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>

出典

2017-06-09 17:47:37

それは動作します、ありがとう:) –

あなたは解決としてマークできますか？ –

['$ scope'、]は動作しますか？ –

あなたのボタンの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>

出典

2017-06-09 17:47:25 erichunt

https://docs.angularjs.org/api/ng/directive/ngHideがひどく落胆しています。 Angularを使用しているときにJQueryを使用する必要はほとんどありません。両方を使用すると読み込み時間が長くなります。 –

良い点は、彼にもっと多くのオプションを与えることだけです。 – erichunt

ボタンをクリックした後にログインボタンを非表示にする方法

答えて

関連する問題