HTML無法登錄

-2

我的代碼到目前爲止是這樣的，它鏈接到main.js。HTML無法登錄

<!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") 
     } 
     }

我雖然出於某種原因。它不會讓我登錄任何解決方案。我曾嘗試更改密碼和用戶名。我無法弄清楚。

來源

2017-08-04 Moogical Cow

從快速查看我可以看到你的$範圍變量不匹配。

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-模型中定義和同爲密碼模式。

編輯：

要改變你的角度應用程序中的按鈕的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風格需要一個對象，當你把btnStyle黃氏風格指令的裏面，它會期待$ scope變量中的一個對象。出於這個原因，你必須在控制器的頭部聲明變量。只要它被定義，它可以保持空。

因此，將下面這行放在控制器主體的頂部。

$scope.btnStyle = {};

ng-style的文檔。

來源

2017-08-04 09:19:21 Adriani6

謝謝你Adriani6。沒有你指出，我不會注意到這麼小的錯誤。還有一個想法是如何改變按鈕的顏色？ –

@MoogicalCow查看我的編輯。 – Adriani6

回答

相關問題