Question

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs /1.4./angular.min.js"></script>
<body>

<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>
</form>

<p>Enter your e-mail address in the input field. AngularJS will display an errormessage if the address is not an e-mail.</p>

</body>
</html>

以上代码我从w3school学到了形式 http://www.w3schools.com/angular/tryit.asp?filename=try_ng_model_validate

在上面的代码中输入的电子邮件是由ng-show =＆＃34; myForm.myAddress。$ error.email＆＃34;语法

NG-模型=＆＃34;文本＆＃34;永远不会被使用，所以如果我从代码中删除它或设置为空白像这样的ng-model =＆＃34; ＆＃34;它不会工作

这背后的概念是什么？

上述代码中ng-model的用途是什么？

Answer 1

基本上ng-model用于绑定输入框值并发送到角度控制器定义的js，你可以访问ng-model =＆＃34; name＆＃34;控制器中的值如此var myName = $ scope.name和HTML中的{{name}}如果您不想要输入框值，可以跳过并从输入框中删除ng-model

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs /1.4./angular.min.js"></script>
<body>

<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>
</form>

<p>Enter your e-mail address in the input field. AngularJS will display an errormessage if the address is not an e-mail.</p>

</body>
</html>

为了更好地进行赎罪，请阅读此https://docs.angularjs.org/api/ng/directive/ngModel

Answer 2

如果您永远不会使用特定型号，则不需要自己编写ng-model属性。但是，如果您正在编写ng-model，那么您必须声明正确的模型名称，例如ng-model="text"（或任何其他有效的模型名称）。

Answer 3

＆＃13;

<script>
  angular.module('emailExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.email = {
        text: 'me@example.com'
      };
    }]);
</script>
  <form name="myForm" ng-controller="ExampleController">
    <label>Email:
      <input type="email" name="input" ng-model="email.text" required>
    </label>
    <div role="alert">
      <span class="error" ng-show="myForm.input.$error.required">
        Required!</span>
      <span class="error" ng-show="myForm.input.$error.email">
        Not valid email!</span>
    </div>
    <tt>text = {{email.text}}</tt><br/>
    <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
    <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
    <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
    <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
    <tt>myForm.$error.email = {{!!myForm.$error.email}}</tt><br/>
  </form>

＆＃13;

你好，

ng-model="text" // you can give whatever you like ex: 
ng-model="mytext" this is useful while rendering with $scope

来吧 ng-show="myForm.myAddress.$error.email＆＃34;这是验证对于电子邮件其中myForm是您声明的表单名称 myaddress是你的输入名称和$ error.email验证角度js

您可以查看下面详细的代码以便更好地理解

<script>
  angular.module('emailExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.email = {
        text: 'me@example.com'
      };
    }]);
</script>
  <form name="myForm" ng-controller="ExampleController">
    <label>Email:
      <input type="email" name="input" ng-model="email.text" required>
    </label>
    <div role="alert">
      <span class="error" ng-show="myForm.input.$error.required">
        Required!</span>
      <span class="error" ng-show="myForm.input.$error.email">
        Not valid email!</span>
    </div>
    <tt>text = {{email.text}}</tt><br/>
    <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
    <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
    <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
    <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
    <tt>myForm.$error.email = {{!!myForm.$error.email}}</tt><br/>
  </form>

输出

Email:  
Required! 
text = 
myForm.input.$valid = false
myForm.input.$error = {"required":true}
myForm.$valid = false
myForm.$error.required = true
myForm.$error.email = false

如果需要，请运行它有关详细信息，请参阅此链接 https://docs.angularjs.org/api/ng/input/input%5Bemail%5D

是否有必要每次都定义ng-model？

3 个答案: