Angularjs基础(十)

ng-blur       描述:规定blur 事件的行为
      实例:当输入框失去焦点的(onblur)时执行表达式:
        <input ng-blur="count = count + 1" ng-init="count=0"/>
        <h1>{{count}}</h1>
      定义和用法
          ng-blur 指令用于告诉AngularJS HTML 元素在失去焦点时须执行的表达式。
          语法:<element ng-blur="expression"></element>
          参数值:值:expression 描述:失去焦点时执行的表达式。

ng-change     描述:规定在内容改变时执行的表达式。
      实例:当输入框 的值改变时执行函数。
        <body ng-app="myApp">
          <div ng-controller="myCtrl">
            <input type="text" ng-change="myFunc()" ng-model="myvalue">
            <p>The input field has changed {{count}} times.</p>
          </div>
        </body>
        <script>
            angular.module(‘myApp‘,[])
            .controller(‘myCtrl‘,[‘$scope‘,function($scope){
            $scope.count =0;
            $scope.myFunc = function(){
                $scope.count++;
              }
            }])
      </script>
    定义和用法
        ng-change 指令用于告诉AngularJS 在HTML元素值改变时需要执行的操作。
        ng-change 指令需要搭配ng-model 指令使用。
        AngularJS ng-change 指令指令不会覆盖原生的 onchange 事件, 如果触发该事件,ng-change 表达式与原生的 onchange 事件都会执行。
        ng-change 事件在值的每次改变时触发,它不需要等等一个完成的修改过程或等待失去焦点的动作
        ng-change 事件只针对输入框值的真实修改,而不是通过JavaScript 来修改。
        语法:<element ng-change="expression"></element>
        参数值: 值:expression 描述:元素值改变时执行表达式。

ng-checked     规定元素是否被选中
        实例:选择一个或选择所有选项:
          <body ng-app="">
            <p>My:</p>
            <input type="checkbox" ng-model="all">
            <input type="checkbox" ng-checked="all">
            <input type="checkbox" ng-checked="all">
            <input type="checkbox" ng-checked="all">
          </body>
        定义和用法
            ng-checked 指令用于设置复选框(checkbox)或单选按钮(radio)的checked 的属性。
            如果ng-checked 属性返回true ,复选框(checkbox) 或单选按钮(radio)将会被选中。
        语法:
            <input type="checkbox | radio" ng-checked="expression">
            参数值: 值:expression 描述; 如果返回true ,将会选中元素选项。

ng-class       描述:指定HTML 元素使用的CSS 类。
        实例:修改<div>元素的类:
            <select ng-model="home">
            <option value="sky">Sky</option>
            <option value="tomato">Tomato</option>
            </select>
            <div ng-class="home">
              <h1>Welcome Home !</h1>
              <p>I like it !</p>
            </div>
        定义和用法
            ng-class 指令用于给HTML 元素动态绑定一个或多个CSS 类。
            ng-class 指令的值可以是字符串,对象,或一个数组。
            如果是字符串,多个类名使用空格分隔。
            如果是对象,需要使用 key-value 对,key 是一个布尔值,value 为你想要添加的类名。只有在 key 为 true 时类才会被添加。
            如果是数组,可以由字符串或对象组合组成,数组的元素可以是字符串或对象。
            语法:<element> ng-class="expression"</element>
            参数值: 值:expression 描述: 表达式返回一个或多个类名。

ng-class-even       描述:类似ng-class,但只在偶数行起作用。
        实例:为表格的偶数行设置 class="striped":
          <table>
            <tr ng-repeat="x in records" ng-class-even="‘striped‘" >
            <td>{{x.Name}}</td>
            <td>{{x.Country}}</td>
            </tr>
        </table>
      定义和用法
          ng-class-even 指令用于为HTML 元素动态的绑定一个或多个CSS 类,但只能为偶数行。
          ng-class-even 指令需要 与ng-repeat 指令搭配使用。
          ng-class-even 指令建议使用 在表格的样式渲染中,但是所有HTML 元素都是支持的。
          语法 <element ng-class-even="expression"></element>
          参数值:值:expression 描述: 达到指定一个或多个css 类。

ng-class-odd       类似ng-class,但只在奇数行起作用。
        实例:为表格的偶数行设置 class="striped";
          <table ng-controller="myCtrl">
            <tr ng-repeat="x in records" ng-class-odd="‘striped‘" >
            <td>{{x.Name}}</td>
            <td>{{x.Country}}</td>
            </tr>
        </table>
      定义和用法
        ng-class-odd 指令用于为HTML 元素动态的绑定一个或多个CSS 类,但只能为奇数行。
        ng-class-odd 指令需要 与ng-repeat 指令搭配使用。
        ng-class-odd 指令建议使用 在表格的样式渲染中,但是所有HTML 元素都是支持的。
        语法:<element ng-class-odd="expression"></element>
        参数值: 值: expression 描述: 表达式指定一个或多个CSS 类。

ng-click       定义元素被点击时的行为
       实例:按钮没次点击时,计数变量count自动加1;
          <button ng-click ="count = count + 1" ng-init="count=0">OK</button>
      定义和用法
          ng-click 指令告诉了AngularJS HTML 元素被点击后需要执行的操作。
      语法:<element ng-click="expression"></element>
      参数值: 值:expression 描述: 元素被点击后执行的表达式。

ng-cloak       在应用正要加载时防止其闪烁。
       实例:页面加载时防止应用闪烁。
        <div ng-app="">
          <p ng-cloak>{{5 + 5}}</p>
        </div>
      定义和用法
        ng-cloak 指令用于在AngularJS 应用在加载时防止AngularJS 代码未加载完而出现的问题。
      语法: <element ng-cloak></element>
    参数值: ng-clock 指令没有参数。

ng-controller     定义应用的控制器对象。
        实例:为应用变量添加控制器。
          <div ng-app="myApp" ng-controller="myCtrl">
              Full Name:{{firstName + " " +lastName}}
          </div>
          <script>
              var app = angular.module(‘myApp‘,[]);
              app.controller(‘myCtrl‘,function($scope){
                $scope.firstName = "John";
                $scope.lastName = "Doe";
            })
        </script>
      定义和用法
          ng-controller 指令用于为你的应用添加控制器。
      语法:<element ng-controller="expression"></element>
      参数值: 值: expression 描述: 控制器

ng-copy       描述:规定拷贝事件的行为。
       实例:在输入框的文本拷贝时执行表达式
          <input ng-copy="count = count + 1" ng-init="count=0" value="Copy this text">
      定义和用法
          ng-copy 指令用于告诉AngularJS在HTML 元素文本被拷贝时要执行的操作。
      语法: <element ng-copy="expression"></element>
      参数值: 值:expression 描述:元素文本被拷贝时执行的表达式。

时间: 2024-11-08 20:11:57

Angularjs基础(十)的相关文章

转: angularjs基础教程(~~较通俗)

Angularjs-基础教程(1) 很久没有写过东西了,感觉写东西都不知道从哪里开始了,现在还是先写点技术性的吧,angularjs--我兄弟把它叫成“俺哥啦js” 1.下载 官方网址:https://angularjs.org/ CDN:https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js 2.简单介绍使用 1.ng-app   ~~~angularjs的渲染范围 决定了angularjs的作用域

Java基础十二--多态是成员的特点

Java基础十二--多态是成员的特点 一.特点 1,成员变量. 编译和运行都参考等号的左边. 覆盖只发生在函数上,和变量没关系. Fu f = new Zi();System.out.println(f.num);//是父类,答案是3 2,成员函数(非静态). 编译看左边,运行看右边. 因为成员函数存在覆盖特性. Fu f = new Zi();//f.show();输出的是子类里面的show方法 3,静态函数. 编译和运行都看左边. 静态函数不具备多态性,多态性是对象的多态性,然后静态函数不涉

Java基础十--接口

Java基础十--接口 一.接口的定义和实例 1 /* 2 abstract class AbsDemo 3 { 4 abstract void show1(); 5 abstract void show2(); 6 } 7 8 当一个抽象类中的方法都是抽象的时候,这时可以将该抽象类用 9 另一种形式定义和表示,就是 接口 interface. 10 */ 11 12 //定义接口使用的关键字不是class,是interface. 13 //interface编译后还是.class文件,其实本质

Bootstrap&lt;基础十五&gt; 输入框组

Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输入添加公共的元素.例如,可以添加美元符号,或者在 Twitter 用户名前添加 @,或者应用程序接口所需要的其他公共的元素. 向 .form-control 添加前缀或后缀元素的步骤如下: 把前缀后后缀元素放在一个带有 class .input-group 的 <div> 中. 接着,在相同的 &

Bootstrap&lt;基础十六&gt; 导航元素

Bootstrap 提供的用于定义导航元素的一些选项.它们使用相同的标记和基类 .nav.Bootstrap 也提供了一个用于共享标记和状态的帮助器类.改变修饰的 class,可以在不同的样式间进行切换. 表格导航或标签 创建一个标签式的导航菜单: 以一个带有 class .nav 的无序列表开始. 添加 class .nav-tabs. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <title>Bootstrap 实

Bootstrap&lt;基础十&gt; 响应式实用工具

Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发.这些可以通过媒体查询结合大型.小型和中型设备,实现内容对设备的显示和隐藏. 需要谨慎使用这些工具,避免在同一个站点创建完全不同的版本.响应式实用工具目前只适用于块和表切换.   超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面 (≥992px) 大屏幕桌面 (≥1200px) .visible-xs-* 可见 隐藏 隐藏 隐藏 .visible-sm-* 隐藏 可见 隐藏 隐藏 .visible-

AngularJS基础01 从HelloWorld说起

作者:arccosxy  转载请注明出处:http://www.cnblogs.com/arccosxy/ 准备工作 首先,创建一个名为index.html的HTML文件,代码如下: <!DOCTYPE html> <head> <title>Learning AngularJS</title> </head> <body> </body> </html> 接下来就是加载angular.js库,访问https:

AngularJS基础知识

AngularJS基础知识 --2015.06.28 1.     AngularJS是什么? Angular官网:https://angularjs.org/ ,API: http://docs.angularjs.org/api AngularJS是一个MV*(Model-View-Whatever, 不管是MVC或者MVVM,统称为MDV(Model Drive View))的JavaScript框架,是Google推出的SPA(single-page-application, 单页面应用

Bootstrap &lt;基础十九&gt;分页

Bootstrap 支持的分页特性.分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. 分页(Pagination) 下表列出了 Bootstrap 提供的处理分页的 class. Class 描述 示例代码 .pagination 添加该 class 来在页面上显示分页. <ul class="pagination"> <li><a href="#">«</a><