AngularJS 中 ng-model 指令的使用详解

阅读时长 4 分钟读完

AngularJS 是一个流行的前端框架,它采用了 MVVM(Model-View-ViewModel)模式,其中 View 层负责呈现数据,而 ViewModel 层则扮演了协调 View 和 Model 之间通信的角色。在 AngularJS 中,ng-model 指令是实现 ViewModel 和 View 绑定的关键之一。

什么是 ng-model 指令?

在 AngularJS 中,ng-model 指令用于在表单元素(如 input、select 和 textarea 等)和作用域中创建双向数据绑定。它将表单的值与指定的作用域属性绑定起来,当表单的值改变时,作用域属性的值也随之改变,并且当作用域属性的值发生改变时,表单的值也会相应地更新。

如何使用 ng-model 指令?

安装 AngularJS

如果你还没有安装 AngularJS,可以通过以下方式安装:

使用 ng-model 指令

使用 ng-model 指令非常简单,只需要将指令绑定到表单元素上,并将其值绑定到作用域属性即可。例如,我们可以在输入框中使用 ng-model 指令来绑定 $scope.name 属性:

-- -------------------- ---- -------
---- -------------- -----------------------
  ------ ----------- ----------------
  -------- -------------
------

--------
  --- --- - ----------------------- ----
  ------------------------ ---------------- -
    ----------- - ----- -----
  ---
---------

在上述代码中,我们使用 ng-model 指令将输入框和 $scope.name 属性绑定起来,当输入框的值发生改变时,$scope.name 的值也会相应地更新。而在 <p> 标签中,我们使用双括号语法展示了 $scope.name 的值。

绑定到对象属性

我们也可以使用点(.)语法来绑定表单元素的值到对象属性上。例如:

-- -------------------- ---- -------
---- -------------- -----------------------
  ------
    ----- ----- ------ ----------- ------------------------------
    ---- ----- ------ ----------- -----------------------------
    ----
    ---- ----- ---------------- - - - - ---------------
  -------
------

--------
  --- --- - ----------------------- ----
  ------------------------ ---------------- -
    ----------- - ----------- ------- --------- -------
  ---
---------

在上述代码中,我们将表单元素的值和一个名为 user 的对象的 firstNamelastName 属性绑定起来。当表单元素的值或者对象属性的值改变时,视图中的 Full Name 字段会实时刷新。

注意事项

  • ng-model 指令只能用于表单元素上。
  • 无论是绑定到普通作用域属性还是对象属性,在表单元素被删除时,对应的作用域属性也会被销毁。

结论

通过本文的介绍,我们可以发现,ng-model 指令确实是 AngularJS 中非常重要的指令之一。它实现了表单与 ViewModel 和 Model 的双向绑定,并极大地简化了前端开发中关于数据交互的复杂度。我们需要注意的是,它只作用于表单元素上,并且在不需要使用时进行清除。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6729f06eddd3a70eb6cec2f6

纠错
反馈