AngularJS表单
    AngularJS表单时输入控件的集合
HTML控件
    一下HTML input 元素被称为HTML 控件:
        input 元素
        select元素
        button元素
        textarea元素

HTML 表单
    AngularjS表单上实例
      <div ng-app="myApp" ng-controller="formCtrl">
         <from novalidate>
          First Name:
         <input type="text" ng-model="user.firstName">
          Last Name:
         <input type="text" ng-model="user.lastName">
            <button ng-click="reset()">RESET</button>
        </from>
        <p>form = {{user}}</p>
        <p>master = {{master}}</p>
      </div>  

      <sctipt>
          var app = angular.module('myApp'm[]);
          app.controller('formCtrl',function($scope){
            $scope.master = {firstName:"John",lastName:"Doe"};
            $scope.reset = function(){
              $scope.user = angular.copy($scope.master);
            };
            $scope.reset();
          })
          novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。
      </sctipt>

      实例解析
          ng-app 指令定义了AngularJS 应用。
          ng-controller指令定义了应用控制器。
          ng-model 指令绑定了两个inputh 元素到模型的user 对象。
          formCtrl 函数设置了mater 对象的初始值,并定义了reset()方法。
          reset() 方法设置了user 对象等于master对象。
          ng-click 指令调用了reset()方法,且在点击按钮时调用。
          novalidate 属性在应用中不是必须的,但是你需要在 AngularJS 表单中使用,用于重写标准的 HTML5 验证。

AngularJS输入验证
    AngularJS表单和控件可以验证输入的数据。

输入验证
    AngularJS表单和控件可以提供验证功能,并对用户输入的非法数据惊醒警告。

应用代码
    <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
      <p>用户名:</p>
      <input type="text" name="user" ng-model="user" required>
      <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
      <span ng-show="myForm.user.$error.required">用户名是必须的。</span>
      <p>
      <input type="subimt" ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
      myForm.email.$dirty && myForm.eail.$invalid">
      </p>
    </form>

    <sctrpt>
      var app = angular.module('myApp',[]);
      app.controller('validateCtrl',function($scope){
        $scope. user = 'John Doe';
        $scope.email = 'john.doe@gmail.com';
      })
    </script>

实例解析
    AngularJS ng-model 指令用于绑定输入元素到模型中。
    模型对象有两个属性: user 和email
    我们使用了ng-show指令,color:red 在邮件是$dirty 或$invalid才显示
    属性:
      $dirty 表单有填写记录
      $valid 字段内容合法的
      $invalid 字段内容是非法的
      $pristine 表单没有填写记录

AngularJS API

AngularJS 全局API
    AngularJS 全局API 用于执行常见任务的JavaScript 函数集合,
      比较对象
      迭代对象
      转换对象

      全局 API 函数使用 angular 对象进行访问。
      以下列出了一些通用的 API 函数:
      angular.lowercase() 转换字符床为小写
      angular.uppercase() 转换字符串为大写
      angular.isString() 判断给定的对象是否为字符串,如果是返回true.
      angular.isNumber() 判断给定对象是否为数字,如果是返回true

angular.lowercase()
      <div ng-app="myApp" ng-controller="myCtrl">
        <p>{{x1}}</p>
        <p>{{x2}}</p>
      </div>
      <script>
          var app = angular.module('myApp',[]);
          app.controller('myCtrl',function($scope){
            $scope.x1 = “JOHN”;
            $scope.x2 =angular.lowercase($scope.x1)
          });
      </script>

angular.uppercase()
    <div ng-app="myApp" ng-controller="myCtrl">
      <p>{{x1}}</p>
      <p>{{x2}}</p>
    </div>
    <script>
        var app = angular.module('myApp',[]);
        app.controller('myCtrl',function($scope){
            $scope.x1 ="John";
            $scope.x2 = angular.uppercase($scope.x1);
        })
    </script>

angular.isString()
      <div ng-app="myApp" ng-controller="myCtrl">
        <p>{{x1}}</p>
        <p>{{x2}}</p>
      </div>
      <script>
        var app = angular.module('myApp',[]);
        app.controller('myCtrl',function($scope){
          $scope.x1 = "JSON";
          $scope.x2 = angular.isString($scope.x1);
        });
      </script>

angular.isNumber()
      <div ng-app="myApp" ng-controller="myCtrl">
          <p>{{x1}}</p>
          <p>{{x2}}</p>
      </div>
      <script>
          var app = angular.module('myApp',[]);
          app.controller('myCtrl',function($scope){
            $scope.x1 = "JOHN"l
            $scope.x2 = angular.isNumber($scope.x1);
          });
    </script>

Angularjs基础(七)的更多相关文章

  1. AngularJS基础入门初探

    一.AngularJS简介 1.1 什么是AngularJS (1)一款非常优秀的前端JS框架,可以方便实现MVC/MVVM模式 (2)由Misko Hevery 等人创建,2009年被Google所 ...

  2. Bootstrap <基础七>按钮

    任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: 以下样式可用于<a>, <butto ...

  3. C#_02.16_基础七_.NET表达式&运算符

    C#_02.16_基础七_.NET表达式&运算符 一.字面量: 字面量和变量的关系来理解字面量会比较简单: 因此字面量是源代码中键入已知的(我们知道它是多少的)值.也可以理解是等号右边的非创建 ...

  4. {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)

    Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 一 Ajax简介 ...

  5. Java基础七-正则表达式

    Java基础七-正则表达式 一.定义: 特定的符号的组合 二.作用: 用于操作字符串数据 三.优缺点 简化代码,但是阅读性差 四.引入 4.1 问题 判断一个号码是否是QQ号? 不是零开头 6-15位 ...

  6. day 72 Django基础七之Ajax

    Django基础七之Ajax   本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 六 同源策略与 ...

  7. day 60 Django基础七之Ajax

      Django基础七之Ajax   本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 六 同源策 ...

  8. {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)

    {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)   Django基础七之 ...

  9. Django基础七之CBV装饰器和中间件

    Django基础七之CBV装饰器和中间件 目录 Django基础七之CBV装饰器和中间件 1. CBV加装饰器 2. Django中间件 2.1 Django中间件介绍 2.2 自定义中间件 2.2. ...

随机推荐

  1. ThenJS

    安装ThenJs:  npm i thenjs 史上最快,与 node callback 完美结合的异步流程控制库 <!doctype html> <html lang=" ...

  2. artDialog组件应用学习(四)

    一.在对话框自定义操作按钮 预览: html调用代码: var btnArray = [ { value: '同意', callback: function () { this.content('你同 ...

  3. Ajax简单介绍和使用步骤

    Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写).现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. 同步是指:发送方发出数据后,等 ...

  4. window 常用MySQL数据库命令总结

    登录:cmd - mysql -uroot -p 创建数据库:CREATE DATABASE `tpcms` DEFAULT CHARACTER SET utf8 COLLATE utf8_gener ...

  5. 10th week task -3 Arrow function restore

    Arrow function restore 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { r ...

  6. SharePoint 2013 - Upgrade

    1. 升级到SP2013时,需要对data connection文件(UDCX文件)进行修改: 1. Mark all UDCX File (Ctrl + A) and open them. 2. F ...

  7. CSS3中的Flexbox弹性布局(一)

    CSS3引入了一种新的布局模式——Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定.调整和分布一个容器里项目布局,即使它们的大小是未知或者动态的,这里简 ...

  8. matlab练习程序(模拟退火SA)

    模拟退火首先从某个初始候选解开始,当温度大于0时执行循环. 在循环中,通过随机扰动产生一个新的解,然后求得新解和原解之间的能量差,如果差小于0,则采用新解作为当前解. 如果差大于0,则采用一个当前温度 ...

  9. 设计模式之装饰模式(Decorator)

    1. 装饰者模式,动态地将责任附加到对象上.若要扩展功能,装饰者提供了比继承更加有弹性的替代方案. 2.组合和继承的区别 继承.继承是给一个类添加行为的比较有效的途径.通过使用继承,可以使得子类在拥有 ...

  10. docker-day1-安装和基本使用

    Docker 1.什么是docker Docker 是一个开源项目,可以实现轻量级的操作系统虚拟化解决方案. Docker 的基础是 Linux 容器(LXC)等技术.在 LXC 的基础上 Docke ...