ng-model_ng-model绑定两个变量-CSDN博客

本文链接：https://blog.csdn.net/weixin_44423801/article/details/92678228

本文主要介绍了AngularJS中ng-model指令，它能将HTML表单元素绑定到scope变量，若变量不存在会创建。还对比了ng-bind和{{ }}两种显示模型数据的方式，指出其区别及解决方法，同时说明了ng-model完成$scope与view的双向绑定，需和输入指令配合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ng-model

定义和用法
ng-model 指令绑定了 HTML 表单元素到 scope 变量中。

如果 scope 中不存在变量, 将会创建它。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<input ng-model="name">

<p>input 输入框的值绑定了变量 "name" :</p>
{{name}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
</script>

<p>该实例演示了如何使用 ng-model 指令绑定输入框的值到 scope 变量中。</p>

</body>
</html>

AngularJS的数据绑定有 ng-bind 和 ng-model ：

ng-bind是从 scope <-> view 的双向绑定。
ng-bind和{ { } }的区别
在AngularJS中显示模型中的数据有两种方式：
一种是使用花括号插值的方式:

<h1>{{ text }}</h1>

另一种是使用基于属性的指令，叫做ng-bind:

<h1 ng-bind = "text"></h1>

这两种方式显示出的效果是一样的，主要的区别和解决方法：

1、ngBind只能单个绑定变量，而{{ }}可以多个绑定变量；

<h1>{{ text }}{{ text }}</h1>

解决方法：
使用ng-bind-template可以绑定一个模板，模板中可以包含多个AngularJS的表达式：
“{{expression}}”;

<h1 ng-bind-template ="{{text}} {{text}}" ></h1>

2、在使用｛{ }｝时因为加载顺序的原因，可能在页面显示的时候会有“闪烁”现象，这是因为{{}}在加载的时候，若网速不好或者首页还未加载angular库时，其会显示出来，然后等到AngularJS才能把它解析成原本应该显示的内容，所以一般建议ng-bind在首页加载的时候使用，{{}}建议是首页以外的页面使用。
解决方法：
添加 ng-cloak 指令：该指令用于在 AngularJS 应用在加载时防止 AngularJS 代码未加载完而出现的问题。

<h1 ng-cloak>{{ text }}</h1>

ng-modle是完成 $scope <-> view 的双向绑定。
ng-model指令的作用是把输入型的元素（input，select，textarea等）和scope中的数据进行绑定的作用，也可以用在自定义的form元素上。ng-model指令需要和input、select等指令进行配合使用。当在元素加上ng-model指令后，框架会负责元素和msg变量的自动同步。

<input type="text" ng-model= "msg">
<h1>{{msg}}</h1>