Angularjs 로그인 응용 프로그램?

각도로 로그인 페이지를 만들고 싶습니다. 입력 된 값을 하드 코딩 된 값과 비교하는 방법을 모르겠습니다. 내가 여기에 내 코드를 부착하고, controller.jsAngularjs 로그인 응용 프로그램?

var app = angular.module('loginApp',[]) 
 

 
app.controller("FormController",function($scope){ 
 
    
 
    $scope.details=[ 
 
     { 
 
      name:"[email protected]", 
 
      password:"password" 
 
     }, 
 
     { 
 
      name:"[email protected]", 
 
      password:"password" 
 
     } 
 
     
 
    
 
     ] 
 
    $scope.login=function($scope){ 
 
     $scope.email=''; 
 
     
 
     if ($scope.details.name==$scope.email &&){ 
 
      console.log("Entered"); 
 
     } 
 
      else{console.log("wrong");} 
 
     }  
 
    
 
})

<!DOCTYPE html> 
 
<html ng-app="loginApp"> 
 
<head> 
 
<title>TO DO List</title> 
 
<link href="css/bootstrap.css" rel="stylesheet" /> 
 
<link href="css/bootstrap-theme.css" rel="stylesheet" /> 
 
<script src="lib/angular.min.js"></script> 
 
<script src="js/controller.js"></script> 
 
</head> 
 
<body> 
 
    
 
<div class="container"><h2>Login App</h2></div>  
 
    
 
<form> 
 
<div class="container" controller="FormController">  
 
<div class="form-group"> 
 
    <label>Email Address</label> 
 
    <input type="email" class="form-control" ng-model="email" placeholder="Email"/> 
 
    
 
    <label>Password</label> 
 
    <input type="password" class="form-control" ng-model="password" placeholder="Password"/> 
 
    
 
    
 
    </div> 
 
    </div> 
 
<div class="container"> 
 
    <button type="submit" ng-click="login()" class="btn btn-default">Submit</button> 
 
    </div> 
 
</form>  
 
    
 
</body> 
 

 
</html>

의 코드를 다시 작성하여 도움이 controller.js 저를 도와주세요

당신은 제대로 각도 응용 프로그램을 부트 스트랩 할 필요가

출처

2016-11-23 Shrey Saxena

하드 코딩 된 값과 일치하는 항목이 있는지 아래의 솔루션에서 확인하십시오.

보안 문제이며 클라이언트 측에서 암호 속성과 같은 중요한 데이터를 확인하려면 서버 측에서 수행해야합니다.

angular 
 
    .module('loginApp', []) 
 
    .controller("FormController", FormController); 
 

 
FormController.$inject = ['$scope']; 
 

 
function FormController($scope) { 
 
    $scope.login = login; 
 

 
    var details = [{ 
 
    name: "[email protected]", 
 
    password: "password" 
 
    }, { 
 
    name: "[email protected]", 
 
    password: "password" 
 
    }]; 
 

 
    function login() { 
 
    var isMatch = false; 
 
    for (var i = 0; i < details.length; i++) { 
 
     if ($scope.email === details[i].name && $scope.password === details[i].password) { 
 
     isMatch = true; 
 
     break; 
 
     } 
 
    } 
 

 
    if (isMatch) { 
 
     console.log("Entered"); 
 
    } else { 
 
     console.log("Wrong"); 
 
    } 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="loginApp"> 
 
    <div ng-controller="FormController"> 
 
    <div class="container"> 
 

 
     <h2>Login App</h2> 
 

 
     <form role="form" name="loginForm" ng-submit="loginForm.$valid && login()"> 
 

 
     <div class="form-group"> 
 
      <label>Email Address</label> 
 
      <input type="email" class="form-control" placeholder="Email" ng-model="email" ng-required="true" /> 
 
     </div> 
 

 
     <div class="form-group"> 
 
      <label>Password</label> 
 
      <input type="password" class="form-control" placeholder="Password" ng-model="password" ng-required="true" /> 
 
     </div> 
 

 
     <div class="form-group"> 
 
      <button type="submit" class="btn btn-default">Submit</button> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>

출처

2016-11-24 10:45:06

시도하십시오 문제

var app = angular.module('loginApp', []) 
 

 
app.controller("FormCrtl", ["$scope", "$filter", function ($scope, $filter) { 
 

 
    $scope.details = 
 
     [{ name: "[email protected]", password: "password" }, 
 
      { name: "[email protected]", password: "password" }] 
 

 
    $scope.checkLoginUser = function() { 
 
     
 
     if ($filter('filter')($scope.details, { name: $scope.email, password: $scope.password }).length > 0) { 
 
      console.log("Entered"); 
 
     } 
 
     else { 
 
      console.log("wrong"); 
 
     } 
 
    } 
 

 

 
}]);

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>TO DO List</title> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    
 
</head> 
 
<body ng-app="loginApp"> 
 
<div class="container" ng-controller="FormCrtl"> 
 
     <h2>Login App</h2> 
 

 
     <div> 
 
      <form name="loginForm" class=" form-group"> 
 
       <label>Email Address</label> 
 
       <input type="email" class="form-control" ng-model="email" placeholder="Email" /> 
 

 
       <label>Password</label> 
 
       <input type="password" class="form-control" ng-model="password" placeholder="Password" /> 
 

 
       <div class="clear"> 
 
        <input type="submit" ng-click="checkLoginUser()" class="btn btn-default" value="Submit" /> 
 
       </div> 
 
      </form> 
 
     </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

출처

2016-11-24 10:47:20

그래서 u는 추가 한 사용자 정의 필터 또는 무엇을 해결하기 위해 다음과 같은? –

아니요, angularjs 서비스 중 하나입니다. $ filter는 각도 자체로 공급자입니다. :) –

Angularjs 로그인 응용 프로그램?

답변

관련 문제