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

Iかかわらず、何らかの理由で。それは私にどんな解決策でもログオンさせません。パスワードとユーザー名を変更しようとしました。私はそれを理解することはできません。

出典

2017-08-04 Moogical Cow

あなたの$ scope変数が一致していないことがわかりました。

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

注HTML内NG-モデルで定義され、パスワードのモデルで同じように、私は$ scope.Usernameに$のscope.usernameを変更しました。

編集：

あなたのアンギュラアプリケーション内のボタンのCSSスタイルを変更するには、あなたが動的にスタイルを適用したい要素に定義されたNG-styleタグに必要です。

ngのスタイルは、オブジェクトがかかるので、あなたはNGスタイルディレクティブ内btnStyleを入れたときに、それは期待していますあなたのボタンが

<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'}; 
}

なる可能性があります$ scope変数のオブジェクトこのため、コントローラの先頭に変数を宣言する必要があります。それが定義されている限り、空のままにすることができます。

したがって、この行をコントローラ本体の上部に配置してください。

$scope.btnStyle = {};

ドキュメントng-style。

出典

2017-08-04 09:19:21 Adriani6

ありがとうAdriani6。私は、あなたが指摘することなく、そのような小さな間違いに気付かなかったでしょう。もう1つは、ボタンの色をどのように変更するのでしょうか？ –

@MoogicalCow私の編集を参照してください。 – Adriani6

HTMLはログインできません

答えて

関連する問題