1.　　AngularJS模型主要就是使用的AngularJS的ng-model指令。

  • ng-model指令可以将输入域的值与 AngularJS 创建的变量绑定。

    <!DOCTYPE html>
    
<html>
    
    <head>
    
        <meta charset="UTF-8">
    
        <title></title>
    
        <script type="text/javascript" src="js/angular.min.js"></script>
    
    </head>
    
    <body ng-app="myApp">
    
        <div ng-app="myApp" ng-controller="myCtrl">
    
            名字: <input ng-model="name">
    
        </div>

        <script>
    
            var app = angular.module('myApp', []);
    
            app.controller('myCtrl', function($scope) {
    
                $scope.name = "王甘林";
    
            });
    
        </script>
    
    </body>
    
</html>
  • 双向绑定：在修改输入域的值时， AngularJS 属性的值也将修改 
    <!DOCTYPE html>
    
<html>
    
    <head>
    
        <meta charset="UTF-8">
    
        <title></title>
    
        <script type="text/javascript" src="js/angular.min.js"></script>
    
    </head>
    
    <body ng-app="myApp">
    
        <div ng-app="myApp" ng-controller="myCtrl">
    
            名字:<input type="text" ng-model="name" /><br />
    
            <h3>你输入了：{{name}}</h3>
    
        </div>

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

        <p>修改输入框的值，标题的名字也会相应修改。</p>
    
    </body>
    
</html>

  • 验证用户输入： 
    <!DOCTYPE html>
    
<html>

    <head>
    
        <meta charset="UTF-8">
    
        <title></title>
    
        <script type="text/javascript" src="js/angular.min.js"></script>
    
    </head>

    <body ng-app="">
    
        <form name="myForm">
    
            Email:
    
            <input type="email" name="myAddress" ng-model="text">
    
            <span ng-show="myForm.myAddress.$error.email" >不是一个合法的邮箱地址</span>
    
        </form>

        <p>在输入框中输入你的邮箱地址，如果不是一个合法的邮箱地址，会弹出提示信息。</p>
    
    </body>

</html>

  • 应用状态：

    <!DOCTYPE html>
    
<html>
    
    <head>
    
        <meta charset="UTF-8">
    
        <title></title>
    
        <script type="text/javascript" src="js/angular.min.js"></script>
    
    </head>
    
    <body>
    
        <form ng-app="" name="myForm" ng-init="myText = 'test@wgl.com'">
    
            Email:
    
            <input type="email" name="myAddress" ng-model="myText" required>
    
            <p>编辑邮箱地址，查看状态的改变。</p>
    
            <h1>状态</h1>
    
            <p>Valid: {{myForm.myAddress.$valid}} (如果输入的邮箱是合法的则为 true)。</p>
    
            <p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
    
            <p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>

        </form>
    
    </body>
    
</html>

  • CSS类：

    <!DOCTYPE html>
    
<html>
    
    <head>
    
        <meta charset="UTF-8">
    
        <title></title>
    
        <script type="text/javascript" src="js/angular.min.js"></script>
    
        <style>
    
            input.ng-invalid{
    
                background-color: lightblue;
    
            }
    
        </style>
    
    </head>
    
    <body>
    
        <form ng-app="" name="myForm">
    
            输入内容：<input name="myAddress" ng-model="text" required>
    
        </form>

        <p>编辑文本域，不同状态背景颜色会发送变化。</p>
    
        <p>文本域添加了 required 属性，该值是必须的，如果为空则是不合法的。</p>
    
    </body>
    
</html>

AngularJS模型的更多相关文章

  1. AngularJS 模型

    ng-model 指令将HTML 控制器(input, select, textarea)的值 和 应用程序数据进行绑定. ng-model 指令 ng-model 指令可以将输入域的值与 Angul ...

  2. AngularJS模型 ng-model 指令

    ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值. ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定.例 ...

  3. AngularJS学习之旅—AngularJS 模型(四)

    1.AngularJS ng-model 指令 1.ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值. 2.ng-model 指令可 ...

  4. AngularJs之三

    一.angularJs的指令模型ng-model指令 ng-model 指令 绑定 HTML 元素 到应用程序数据. 为应用程序数据提供类型验证(number.email.required).为应用程 ...

  5. angularJS（3）

      angularJS(3) 一.angularJs的指令模型ng-model指令 ng-model 指令 绑定 HTML 元素 到应用程序数据. 为应用程序数据提供类型验证(number.email ...

  6. AngularJS Bootstrap

    AngularJS 的首选样式表是 Bootstrap. 可以在 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: < ...

  7. 1.AngularJS初探

    1.需要什么前端开发环境 1)代码编辑工具 webstorm 2)断点调试工具 chrome插件Batarang 3)版本管理 tortoiseGit 4)代码合并和混淆工具 grunt-contri ...

  8. AngularJS安装配置与基础概要整理（上）

    以前整理的,可供参考. 安装: 1.首先要安装node.js和它的npm包管理系统.(nodejs相关待整理) 2.安装grunt .grunt是一个基于任务的Javascript工程命令行构建工具. ...

  9. angularjs基础——变量绑定

    1)弄一个ng-app(angularjs 应用) 2)在里面用ng-model(angularjs 模型)就可以定义一个模型变量 3)使用模版方法就可以输出变量了(例如:{{name}}) 示例: ...

随机推荐

  1. 为Guid数据类型的属性(property)赋值

    先来看看数据库表中的字段设计: 在数据库的数据类型为uniqueidentifier. 而在程序中对应的数据类型为GUID. property有get和set,也就是说能获取值也可以赋值.

  2. Boost条件变量condition_variable_any

    Boost条件变量可以用来实现线程同步,它必须与互斥量配合使用.使用条件变量实现生产者消费者的简单例子如下,需要注意的是cond_put.wait(lock)是在等待条件满足.如果条件不满足,则释放锁 ...

  3. 用大白话聊聊JavaSE -- 如何理解Java Bean（一）

    首先,在开始本章之前,先说一个总的概念:所谓的Java Bean,就是一个java类,编译后成为了一个后缀名是 .class的文件.这就是Java Bean,很多初学者,包括当年的我自己,总是被这些专 ...

  4. 【Java学习系列】第2课--Java语法及面向对象

    本文地址 分享提纲: 1. Java程序特点 1.1 基本语法 1.2 字符串 1.3 变量 1.4 Java数组 1.5 Java枚举 1.6 Java修饰符 1.7 Java编译制定在制定目录 2 ...

  5. 八皇后算法的另一种实现(c#版本)

    八皇后: 八皇后问题,是一个古老而著名的问题,是回溯算法的典型案例.该问题是国际西洋棋棋手马克斯·贝瑟尔于1848年提出:在8×8格的国际象棋上摆放八个皇后,使其不能互相攻击,即任意两个皇后都不能处于 ...

  6. swift 学习笔记

    1. 数组中取出字符串的方法: 1)let string = "\arr[0]" 2) let string = String(stringInterpolationSegment ...

  7. wpf版扫雷游戏

    近来觉得wpf做出来的界面很拉风,自己也很喜欢搞些小游戏,感觉这做出来的会很炫,很装逼,(满足自己的一点小小的虚荣心)于是就去自学,发现感觉很不错,可是属性N多,太多了,而且质料也少,很多不会用,只会 ...

  8. TFFS格式化到创建成功过程

    True FFS内核编程 1.格式化FLASH 即使FLASH没有和块设备驱动绑定,也可对其进行格式化. tffsDevFormat (int tffsDriveNo, int formatArg); ...

  9. swift学习笔记1——基础部分

    之前学习swift时的个人笔记,根据github:the-swift-programming-language-in-chinese学习.总结,将重要的内容提取,加以理解后整理为学习笔记,方便以后查询 ...

  10. GUID生成器

    这个GUID生成器是一个小巧的软件,属于笔者在空余时间开发的. http://pan.baidu.com/s/1sk6VGpn