Question

请分享我有关如何解决的详细信息。我有两个按钮登录和注册点击登录按钮用户名和密码出现并提交按钮，但我想要登录和注册按钮隐藏。

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>

Answer 1

使用ng-hide或ng-show根据范围内的变量修改元素的可见性。

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

＆＃13;

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() {}
}])

＆＃13;

<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>

＆＃13;

Answer 2

提供按钮ID并使用javascript或jQuery隐藏它们。

Pure 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>

单击按钮后如何隐藏登录按钮

2 个答案: