每次都需要定义ng-model吗？答案

【问题标题】：Is it necessary to define ng-model every time?每次都需要定义ng-model吗？
【发布时间】：2017-04-08 09:38:06
【问题描述】：

<!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="myForm.myAddress.$error.email" 语法获取

ng-model="text" 从未使用过，所以如果我从代码中删除它或像这样 ng-model="" 设置为空白，它将无法工作

这背后的概念是什么？

上面代码中 ng-model 的具体用途是什么？

【问题讨论】：

ng-model 属性是负责绑定验证的参与者，例如 required、mask、type="email" 等。您可以使用和放置未使用的变量，就像您的示例一样。 Angular 将在没有 ng-model 的情况下运行，但不会发生验证

标签： angularjs

【解决方案1】：

基本上 ng-model 用于绑定输入框值并发送到您定义的角度控制器的 js，您可以像这样访问控制器中的 ng-model="name" 值 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

【讨论】：

我了解 ng-model 绑定了 html 值，并且它在表达式 {{ }} 中由其模型名称使用。但是这里的值是由 myForm.myAddress 获取的。如果我将 ng-model = "Text" 更改为 ng-model = "anyname" 它仍然有效
没问题是的，你可以顺便说一句如果你将 ng-model = "Text" 更改为 ng-model = "anyname" 那么你必须在 html 中将 {{Text}} 更改为 {{anyname}}并在 js $scope.Text 到 $scope.anyname

【解决方案2】：

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

【讨论】：

【解决方案3】：

<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>

你好，

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" 这是验证对于电子邮件其中 myForm 是您声明的表单名称 myaddress 是您的输入名称并且 $error.email 是 angular 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

【讨论】：