角度模型更改 - HTML

在 AngularJS 中，我们通常使用角度模型 (Model) 控制我们的应用程序状态。当我们的用户与应用程序进行交互时，我们的视图 (View) 与这些角度模型互动以更新应用程序的状态。在这篇文章中，我们将深入了解如何使用 HTML 来更改这些角度模型。

使用 ngModel 指令来更新模型

ngModel 指令是 AngularJS 框架中最常用的指令之一。它是用于将视图中的元素与角度模型进行双向绑定的指令。我们可以在 input、textarea、select 元素上使用这个指令，让用户可以输入数据，并立即更新模型中的值。

例如，我们可以创建一个文本输入框，并使用 ngModel 指令将其与模型中的名字属性进行绑定：

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

这个指令会自动将用户在输入框中输入的值与名字属性进行绑定。当用户输入文本时，模型中的名字属性也会同时更新。

使用 ngBind 指令来更新视图

ngBind 指令可以用于将角度模型的值绑定到视图中的元素上。与 ngModel 指令不同的是，ngBind 指令的值只会被更新一次。这意味着当角度模型的值发生更改时，视图将不会自动更新。

例如，我们可以在一个 div 元素内使用 ngBind 指令，将角度模型中的名字属性绑定到视图上：

<div ng-bind="name"></div>

当我们在代码中更改名字属性时，视图也将同时更新。

使用 ngRepeat 指令来循环渲染

有时我们需要将一个数组中的所有项循环遍历并在视图中呈现。这时候我们可以使用 ngRepeat 指令来渲染一个 HTML 元素列表。

例如，我们可以创建一个数组对象，并使用 ngRepeat 指令来循环渲染这个数组中的每个对象：

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

这段代码将创建一个列表，其中列出了数组中的每个对象的名字和价格属性。

总结

在 AngularJS 中，我们可以使用 ngModel、ngBind 和 ngRepeat 等指令来更改角度模型和渲染视图。当我们掌握了这些基本指令后，我们就可以开始创建更复杂的交互式应用程序了。