Question

到目前为止，我的代码是这样的，它与main.js。

相关联

<!DOCTYPE html>
<html ng-app="grocceryStore">

  <head>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
    <script src="js/angular-ui.js"></script>
    <script src="js/app.js"></script>
    <script src="js/items.js"></script>
    <script src="js/product.js"></script>
    <script src="js/main.js"></script>
  </head>
  <style>
  body {
     background-color:#D4E6F1;
}
</style>

  <body>
    <img src="http://i.imgur.com/wqfHrmJ.png?1" style= "display: block;
margin-left: auto; margin-right: auto;"/>
    <div class="container-fluid" ng-controller="grocceryCtrl">
        <font color='#D68910'>
        <h1 class="header"> Mighty's Groceries </h1>
        <div ng-show="!login">
    <p align="center"><input type="text" placeholder="Enter Username" ng-model="Username" color="red" class="form-control" style="width: 500px;" /></p>
        <p align="center"><input type="password" placeholder="Enter Password" ng-model="Password" class="form-control" style="width: 500px;" /></p>
              <p align="center">
                <button class="btn btn-primary" ng-click = "checkLogin()">Login</button>
          </p>
        </div>

main.js

(function () {
  var secretEmptyKey = '[$empty$]'

    app.controller('grocceryCtrl', function($scope) {
      $scope.selected = undefined; 
      $scope.storeProductArray = storeProductArray;
      var maxNumProducts = 15;
      var discountAmt = 5;
      $scope.purchasedProductArray = [];
      $scope.totalAmt = 0;  
      $scope.login = false;

      $scope.checkLogin = function() {
        if($scope.username == "admin" && $scope.password == "admin") {
            alert("Login Successful!!");
            $scope.login = true;
        }
        else {
            alert("Invalid User name or Password")
        }
      }

我出于某种原因。它不会让我登录任何解决方案。我试过更改密码和用户名。我无法弄清楚。

Answer 1

从快速查看，我可以看到您的$ scope变量不匹配。

if($scope.Username == "admin" && $scope.Password == "admin") {
    alert("Login Successful!!");
    $scope.login = true;
}
else {
    alert("Invalid User name or Password")
}

注意，我将$ scope.username更改为$ scope.Username，如HTML中的ng-model中所定义，密码模型也相同。

编辑：

要更改Angular应用程序中按钮的CSS样式，您需要在要动态应用样式的元素上定义ng样式标记。

您的按钮将更改为

<button class="btn btn-primary" ng-style="btnStyle" ng-click = "checkLogin()">Login</button>

你的控制器可能会变成

if($scope.Username == "admin" && $scope.Password == "admin") {
    alert("Login Successful!!");
    $scope.login = true;
    $scope.btnStyle = { 'background' :'green'};
}
else {
    alert("Invalid User name or Password")
    $scope.btnStyle = { 'background' :'red'};
}

因为ng-style接受一个对象，当你将btnStyle放在ng-style指令中时，它会期望$ scope变量中有一个对象。因此，您必须在控制器的头部声明变量。只要定义它，它就可以保持为空。

因此，请将此行放在控制器主体的顶部。

$scope.btnStyle = {};

ng-style的文档。

HTML无法登录

1 个答案: