AngularJS入门（4）---ng-model指令

最新推荐文章于 2023-07-17 14:36:24 发布

weixin_43735372

最新推荐文章于 2023-07-17 14:36:24 发布

阅读量325

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ng-model模型文章标签： AngularJS入门（4）

本文链接：https://blog.youkuaiyun.com/weixin_43735372/article/details/84297126

ng-model模型专栏收录该内容

1 篇文章

订阅专栏

AngularJS的ng-model指令用于将数据绑定到HTML输入元素，实现双向数据绑定，进行输入验证，并能反映应用状态变化。它可以绑定任何有效的JS对象或数组，并在模型值变化时更新视图。此外，ng-model还支持required属性进行必填验证，以及多个状态属性如dirty、pristine等来跟踪用户交互。

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

AngularJS ng-model 指令

AngularJSd的模型（model）实际上就是普通的JS对象，与控制器类似，不需要特别的去扩展任何AngularJS的底层类，也不用去构造（construct）模型对象。
可以在模型层中使用任何当前存在的纯JS的类或对象，模型可拥有的属性也不仅限于原始值，任何有效的JS对象或数组都是可以的。只需要将模型简单的指派给$scope,AngularJS就可以确认它的存在。
AngularJS没有侵略性，它让模型对象远离框架特定的代码。

ng-model是用来把应用数据绑定到HTML控制器(input、select、textarea)，接下来说ng-model的几个具体的用法：

将输入域的值与AngularJS创建的变量绑定

<!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="myContr">
        我是：<input type="text" ng-model="name">
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myContr', function ($scope) {
            $scope.name = '张敏';
        });
    </script>
</body>
</html>

双向绑定（前面几篇里提到过这个例子）

<!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 ng-init="name='张敏'">
        我是：<input type="text" ng-model="name"><br>
        我的名字是：{{name}}
    </div>
</body>
</html>

验证输入域内容，如果错误可以给出一个提示

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

 <form ng-app name="myForm">
        正确输入你的Email：<input type="email" name="text" ng-model="myEmail">
        <p ng-show="myForm.text.$error.email">输入的格式有误</p>
  </form>

</body>
</html>

以上实例中，提示信息会在 ng-show 属性返回 true 的情况下显示。

实时应用状态的变化

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

<form ng-app name="myForm" ng-init="myEmail='1210595791@qq.com'">
        我的邮箱是：<input type="email" name="inputMyEmail" ng-model="myEmail" required>
        <p>编辑邮箱，仔细观察下面应用状态的变化</p>

        <h2>应用状态变化</h2>
       <p>输入的值合法则是true（Valid）:{{myForm.inputMyEmail.$valid}}</p>
        <p>添加合法的值（Valid-key）:{{myForm.inputMyEmail.$valid-[]}}</p>
        <p>输入的值不合法则是true（invalid）:{{myForm.inputMyEmail.$invalid}}</p>
        <p>添加不合法的值（invalid-key）:{{myForm.inputMyEmail.$invalid-[]}}</p>
        <p>输入的值改变则是true（Dirty）:{{myForm.inputMyEmail.$dirty}}</p>
        <p>输入的值没有改变则是true（pristine）:{{myForm.inputMyEmail.$pristine}}</p>
        <p>通过触屏点点击则是true（Touched）:{{myForm.inputMyEmail.$touched}}</p>
        <p>没有通过触屏点点击则是true（untouched）:{{myForm.inputMyEmail.$untouched}}</p>

</form>

</body>
</html>

注意：

文本域添加了 required 属性，该值是必须的，如果为空则是不合法的；
第五个状态值，输入的值改变后变为true，如果再改回之前的值依然是true，也就是说输入框一旦被操作，dirty的值就成为了true；
第七个状态值，需要先点击输入框，再点击空白处才能发生改变。
还有很多的属性，这是一些常用的

为HTML元素提供css类

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
    <style>
        input.ng-invalid {
            background-color: chartreuse;
        }
    </style>
</head>
<body>
    <form ng-app name="myForm">
        我的名字是：<input name="myName" ng-model="myText" required>
    </form>
    <p>编辑文本域，不同状态背景颜色会发生变化。</p>
</body>
</html>