如何比较Angularjs中的值？

I'm a newbie to angular, so I need a help.

我是棱角分明的新手，所以我需要帮助。

In html, I wrote the following

在html中，我写了以下内容

<div class="form-group">
      <input type="email" name="Email" id="LoginEmail class="form-control" placeholder="Email Address" required>
</div>


<div class="form-group">                                        
 <input type="password" name="password" id="LoginPassword" class="form-control" placeholder="Password" required>                                   
</div>

In angular, I write the following code

在角度，我写下面的代码

angular
    .module("LoginForm", [])
    .controller("processingLoginForm", ["$scope", function ($scope) {

        $scope.userinfo = [
            {name : "User1", 
             account : "user1@whatever.com", 
             city: "XYZ", 
             password: "Angular@2017"}
        ];

    }]);

I need to compare the value of input box with the value of the script and show a message if it's not correct, so how can I do that?

我需要将输入框的值与脚本的值进行比较并显示一条消息，如果它不正确，那么我该怎么做呢？

3 个解决方案

#1

Firstly you need to assign model to your template scope. Use ng-model for this purpose. Then you need a form to submit and trigger a function to check if user input matches to the desired values.

首先，您需要将模型分配给模板范围。为此目的使用ng-model。然后，您需要一个表单来提交并触发一个函数来检查用户输入是否与所需的值匹配。

Add ng-model and wrap your inputs with a form tag:

添加ng-model并使用表单标记包装输入：

<form ng-submit="login()">
    <div class="form-group">
      <input ng-model="email" type="email" name="Email" id="LoginEmail" class="form-control" placeholder="Email Address" required>
    </div>

    <div class="form-group">
      <input ng-model="password" type="password" name="password" id="LoginPassword" class="form-control" placeholder="Password" required>
    </div>
    <button type="submit">Login</button>
  </form>

Check if user input is valid in Controller:

检查用户输入在Controller中是否有效：

  $scope.login = function() {
        const isUserValid = $scope.email === $scope.userinfo[0].account && $scope.password === $scope.userinfo[0].password;
    if(isUserValid) {
            alert("Logged In Successfully");
        }else {
        alert("Email or password incorrect. Try again.")
    }
  }

Here's a working example of the above code.

这是上面代码的一个工作示例。

#2

In your input elements you miss the ng-model attribute. It is used to bind the values with your scope variables.

在输入元素中，您会错过ng-model属性。它用于将值与范围变量绑定。

<input type="email" ... ng-model="email" ...>
<input type="password" ... ng-model="password" ...>

And in your controller you can write

在你的控制器中你可以写

if($scope.email == $scope.userinfo[0].account && $scope.password == $scope.userinfo[0].password){
    //Login ok
}else{
    //Login failed
}

#3

Assuming there is a form element somewhere above

假设上面有一个表单元素

Add ng-submit to it

添加ng-submit到它

<form ng-submit="submit()">

Add ng-model to the form elements.

将ng-model添加到表单元素。

I have added state.email and state.password

我添加了state.email和state.password

<div class="form-group">
  <input ng-model="state.email" type="email" name="Email" id="LoginEmail" class="form-control" placeholder="Email Address" required>
</div>
<div class="form-group">                                        
   <input ng-model="state.password" type="password" name="password" id="LoginPassword" class="form-control" placeholder="Password" required>                                   
</div>

Compare the binding values to the values in $scope.userinfo

将绑定值与$ scope.userinfo中的值进行比较

angular
.module("LoginForm", [])
.controller("processingLoginForm", ["$scope", function ($scope) {
    $scope.userinfo = [{
         name : "User1", 
         account : "user1@whatever.com", 
         city: "XYZ", 
         password: "Angular@2017"
    }];

    // when you submit the form, this function will be called
    $scope.submit = function (e) {
      e.preventDefault();
      if ($scope.state.email !== $scope.userinfo[0].account || $scope.state.password !== $scope.userinfo[0].password) {
        // did not match
      } else {
        // matched
      }
    }
}]);

#1