Question

当我声明ng-app和ng-controller时，表单不进行验证:( 如果我删除它们然后表单进行基本验证，但我想使用控制器逻辑来执行用户名和密码验证和路由，我不能使用（因为ng-controller被删除）

请建议，我缺少什么

<html ng-app>
  <head>
    <title>My Angular App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript"> 
    document.write("\<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>\<\/script>");
</script>
  <script>




<script>
var app = angular.module('myapp', []);
app.controller('loginCtrl', function($scope, $location){
$scope.loginCheck = function(){
var uname = $scope.user.name;
var pwd = $scope.user.password;
if ( uname == 'admin' && pwd =='admin123'){
window.location.hash='#/dashboard';
$location.path('/dashboard');
            }
            else $location.path('/about')
      };

});
</script>

隆吉

        <form   name="form" class="login" ng-app='myapp' ng-controller = 'loginCtrl' >

<input placeholder="User Name"
       name="name" ng-model="user.name"  class="login-input" ng-model-options="{updateOn:'blur'}"
       required pattern=".{3,}" />
<div class="error-message" ng-show="form.name.$invalid && !form.name.$pristine">
    We need a name with 3 chars or more.
</div>

<input placeholder="E-mail"
       name="email" ng-model="user.email" class="login-input"  ng-model-options="{updateOn:'blur'}"
       required type="email"  />
<div class="error-message"
     ng-show="form.email.$invalid && !form.email.$pristine">
    We need a valid e-mail address.
</div>

<input type="password" class="login-input"  ng-model="user.password" name="uPassword" required placeholder='Password' ng-minlength="6" ng-maxlength="15" title="6 to 15 characters" />
<span class="error" ng-show="form.uPassword.$dirty && form.uPassword.$error.minlength">Too short</span>
<span ng-show="form.uPassword.$dirty && form.uPassword.$error.required">Password required.</span><br />

<input type="password" class="login-input"  ng-model="user.confirmpassword" name="ucPassword" required placeholder='Confirm Password' ng-minlength="6" ng-maxlength="15" title="6 to 15 characters" />
<span class="error" ng-show="form.ucPassword.$dirty && form.ucPassword.$error.minlength">Too short</span>
<span ng-show="form.ucPassword.$dirty && form.ucPassword.$error.required">Retype password.</span>
<div ng-show="(form.uPassword.$dirty && form.ucPassword.$dirty) && (user.password != user.confirmpassword)">
    <span>Password mismatched</span>
</div>

请建议我如何在此表单中添加/指定ng-controller和ng-app

Answer 1

你的app中有很多问题：

第一行：<html ng-app>

删除ng-app，如评论中所述，您只能有一个ng-app代码

连续2 <script>：

这里：

<script>
<script>
var app = angular.module('myapp', []);

JQuery应该在angular之前插入，并且应该以这种方式插入：

这里：

<script src='//code.jquery.com/jquery-latest.min.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

请在下面找到一个工作示例：

＆＃13;

<html>

<head>
  <title>My Angular App</title>
  <script src='//code.jquery.com/jquery-latest.min.js'></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

  <script>
    var app = angular.module('myapp', []);
    app.controller('loginCtrl', function($scope, $location) {
      $scope.loginCheck = function() {
        var uname = $scope.user.name;
        var pwd = $scope.user.password;
        if (uname == 'admin' && pwd == 'admin123') {
          window.location.hash = '#/dashboard';
          $location.path('/dashboard');
        } else {
          $location.path('/about');
        }
      };
    });
  </script>
</head>

<body ng-app="myapp" ng-controller="loginCtrl">
  <form name="form" class="login">

    <input placeholder="User Name" name="name" ng-model="user.name" class="login-input" ng-model-options="{updateOn:'blur'}" required pattern=".{3,}" />
    <div class="error-message" ng-show="form.name.$invalid && !form.name.$pristine">
      We need a name with 3 chars or more.
    </div>


    <input placeholder="E-mail" name="email" ng-model="user.email" class="login-input" ng-model-options="{updateOn:'blur'}" required type="email" />
    <div class="error-message" ng-show="form.email.$invalid && !form.email.$pristine">
      We need a valid e-mail address.
    </div>


    <input type="password" class="login-input" ng-model="user.password" name="uPassword" required placeholder='Password' ng-minlength="6" ng-maxlength="15" title="6 to 15 characters" />
    <span class="error" ng-show="form.uPassword.$dirty && form.uPassword.$error.minlength">Too short</span>
    <span ng-show="form.uPassword.$dirty && form.uPassword.$error.required">Password required.</span>
    <br />

    <input type="password" class="login-input" ng-model="user.confirmpassword" name="ucPassword" required placeholder='Confirm Password' ng-minlength="6" ng-maxlength="15" title="6 to 15 characters" />
    <span class="error" ng-show="form.ucPassword.$dirty && form.ucPassword.$error.minlength">Too short</span>
    <span ng-show="form.ucPassword.$dirty && form.ucPassword.$error.required">Retype password.</span>
    <div ng-show="(form.uPassword.$dirty && form.ucPassword.$dirty) && (user.password != user.confirmpassword)">
      <span>Password mismatched</span>
    </div>
  </form>
</body>

＆＃13;

当在表单标记中声明ng-app和ng-controller时，angularjs形式不起作用

1 个答案: