AngularJS 中 Ng-model 完整指南-JavaScript中文网-JavaScript教程资源分享门户

什么是 Ng-model?

在 AngularJS 中，ng-model 是一个指令，作用是将数据绑定到 HTML 元素，实现数据双向绑定。在输入表单中使用最为广泛，可以将用户在表单中输入的数据绑定到 JavaScript 中的变量，同时也可以将 JavaScript 中的数据绑定到表单元素之中。

如何使用 Ng-model?

基本用法

// www.javascriptcn.com code example
<!-- ng-model 绑定到一个字符串变量 -->
<input type="text" ng-model="name">

<!-- ng-model 绑定到一个数字变量 -->
<input type="number" ng-model="age">

<!-- ng-model 绑定到一个布尔变量 -->
<input type="checkbox" ng-model="checked">

<!-- ng-model 绑定到一个选项列表 -->
<select ng-model="selected">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

表单验证

在 AngularJS 中，ng-model 还可以通过指令实现表单元素验证。使用 $valid 可以获取表单元素的验证结果。

<form name="myForm">
    <input type="email" name="email" ng-model="email" required>
    <span ng-show="myForm.email.$error.required">必须填写电子邮件地址。</span>
    <span ng-show="myForm.email.$error.email">不是一个有效的电子邮件地址。</span>
</form>

自定义过滤器

在 AngualrJS 中，ng-model 可以通过自定义过滤器实现更加灵活的数据处理。

<input type="text" ng-model="name | uppercase">

在上面这个例子中，ng-model 对绑定到的 name 变量进行了 uppercase 转换，因此 name 中的所有字符都被转换为大写字母。

自定义指令

在 AngularJS 中，ng-model 可以通过自定义指令实现更加高级的数据处理。

<my-input ng-model="name" validate></my-input>

在上面这个例子中，我们通过自定义指令 my-input 实现了一个自定义的 input 元素，并增加了一个 validate 属性来实现表单验证的功能。

Ng-model 实现原理

在 AngularJS 中，ng-model 通过监听 HTML 元素的变化，将变化传递给控制器中的变量，实现数据双向绑定。

<input type="text" ng-model="name">

在上面这个例子中，ng-model 实现了将用户在 input 元素中输入的数据，自动绑定到控制器的 name 变量中。

当用户在 input 元素中输入数据时，ng-model 实现了监听 input 元素的 change 事件，然后将用户输入的数据传递给控制器中的变量进行更新。

当控制器中的变量发生变化时，ng-model 实现了监听变量的更新，然后将变量的新值传递给 input 元素进行更新。

如何优化 Ng-model 的性能?

使用 ng-cloak

在某些情况下，ng-model 可能会导致页面闪烁的问题。这是因为 HTML 页面在加载的时候，会首先显示未渲染的文本内容，然后再通过 JavaScript 动态渲染内容，这个过程会导致页面的闪烁。

解决这个问题的方法是使用 ng-cloak 指令，直到 AngularJS 程序运行后才显示页面内容。

<div ng-cloak>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
</div>

使用 track by

在 AngularJS 中，当使用 ng-repeat 渲染大量数据时，会导致性能下降。这是因为 AngularJS 在对数据进行渲染时，每次都会重新生成一个新的 DOM 元素，这个过程十分耗时。

解决这个问题的方法是使用 track by 指令，它可以对数据进行缓存，避免重复渲染。

<ul>
    <li ng-repeat="item in items track by item.id">{{ item.name }}</li>
</ul>

以上就是 AngularJS 中 Ng-model 的完整指南，通过学习这些知识点，您可以更加深入地了解 AngularJS 的核心概念，并且通过实践掌握使用 AngularJS 构建前端应用程序的方法。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67cff890e46428fe9ec5a744

AngularJS 中 Ng-model 完整指南