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 描述:元素文本被拷贝时执行的表达式。


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361286.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在命令行上操作JAR,WAR和EAR

尽管Java IDE和许多图形工具使查看和操作Java归档文件&#xff08;JAR&#xff0c;WAR和EAR&#xff09;文件的内容比以往更加容易&#xff0c;但有时我还是更喜欢使用命令行jar命令来完成这些任务。 当我必须重复做某事或作为脚本的一部分来做时&#xff0c;尤其如此。 在本文…

C#语言使用多态(接口与override) ——帮您剔除对面向对象多态性的疑惑

多态是面向对象编程中三大机制之一,其原理建立在"从父类继承而来的子类可以转换为其父类"这个规则之上,换句话说,能用父类的地方,就能用该类的子类.当从父类派生了很多子类时,由于每个子类都有其不同的代码实现,所以当用父类来引用这些子类时,同样的操作而可以表现出…

Java如何以及为什么使用Unsafe?

总览 sun.misc.Unsafe至少在Java 1.4&#xff08;2004&#xff09;中就已经存在于Java中。 在Java 9中&#xff0c;不安全将与许多其他供内部使用的类一起隐藏。 以提高JVM的可维护性。 尽管仍不确定究竟将取代Unsafe到底是什么&#xff0c;但我怀疑将取代Unsafe不仅仅是一件事…

Angularjs基础(三)

AngularJS ng-model 指令     ng-model 指令用于绑定应用程序数据到HTML 控制器&#xff08;input,select,textarea&#xff09;的值ng-model指令     ng-model指令可以将输入域的值与AngularJS 创建的变量绑定。       实例&#xff1a;         <di…

ASP.NET MVC的生命周期与网址路由

网址路由&#xff08;Routing&#xff09;在ASP.NET MVC中有两个主要用途&#xff0c;一个用途是匹配通过浏览器传来的HTTP请求&#xff0c;另一个用途则是将适当的网址返回浏览器。 首先我们来看下第一个用途&#xff0c;也就是匹配通过浏览器传来的HTTP请求。 客户端对ASP.NE…

ecshop分页类assign_pager分析和扩展

ecshop分页类assign_pager分析和扩展,我们前面的文章中介绍过ecshop ajax分页&#xff0c;他的基础都是简单单一的分页。如果我们要在ecshop分页里面传入自己的参数&#xff0c;你就必须对ecshop的assign_pager分页函数进行系统的认识和分析。 首先我们看category.php的ecshop分…

NEC css规范

CSS规范 - 分类方法 SS文件的分类和引用顺序 通常&#xff0c;一个项目我们只引用一个CSS&#xff0c;但是对于较大的项目&#xff0c;我们需要把CSS文件进行分类。 我们按照CSS的性质和用途&#xff0c;将CSS文件分成“公共型样式”、“特殊型样式”、“皮肤型样式”&#…

JDK 8中的流驱动的集合功能

这篇文章介绍了JDK 8的应用–引入了带有集合的 流 &#xff0c;以更简洁地完成通常需要的与集合相关的功能。 在此过程中&#xff0c;将演示并简要说明使用Java Streams的几个关键方面。 请注意&#xff0c;尽管JDK 8 Streams通过并行化支持提供了潜在的性能优势&#xff0c;但…

知识汇集

Oracle中锁介绍&#xff1a;http://space.itpub.net/26961876/viewspace-731300转载于:https://www.cnblogs.com/yaohonv/archive/2012/08/18/tech-col.html

jquery mobile 移动web(5)

有序列表   <div data-role"content">     <ol data-role"listview" data-theme"g">       <li><a href"#"> List 1</a></li>       <li><a href"#"> L…

cjmx:JConsole的命令行版本

当监视正在运行的Java应用程序时&#xff0c;JConsole是一个很好的工具。 但是&#xff0c;当无法使用JConsole直接连接到JVM&#xff08;例如&#xff0c;由于网络限制&#xff09;并且无法进行SSH隧道传输时&#xff0c;那么拥有命令行版本的JConsole会很棒。 jcmx是JConsol…

Android中SQLiteDatabase操作【附源码】

像我们做的很多应用程序及网站一样&#xff0c;基本都是对数据库进行增删改查来实现相应的功能。那么Android开发也一样&#xff0c;不过由于在移动客户端应用&#xff0c;所以不会像sql server、mysql那么复杂&#xff0c;Android应用程序支持本地数据库&#xff0c;SQLiteDat…

移动设备HTML5页面布局

在HTML5标准添加的新元素中&#xff0c;用于常见页面结 构的包括header footer footer nav aside aside article section hgroup 。 下面简单介绍一下这个元素&#xff1a; 1.header header>元素定义文档的页面组合&#xff0c;通 常是一些引导和导航信息&#xff0c;标签…

Hazelcast入门指南第5部分

这是我撰写的有关Hazelcast的一系列文章的延续。 我强烈建议您阅读其他内容&#xff1a; 第1 部分 &#xff0c; 第2 部分 &#xff0c; 第3 部分和第4部分 。 让人一见倾心的东西&#xff1f; 这篇文章中将没有Hazelcast专用代码。 让我重复一遍。 这篇文章中将没有Hazelcast…

【BEV感知算法概述——下一代自动驾驶感知算法】

文章目录 BEV感知算法概念BEV感知算法数据集介绍BEV感知算法分类BEV感知算法的优劣小结 BEV感知算法概念 Bird’s-Eye-View&#xff0c;鸟瞰图&#xff08;俯视图&#xff09;。BEV感知算法存在许多的优势。 首先&#xff0c;BEV视图存在遮挡小的优点&#xff0c;由于视觉的透…

jquery鼠标事件

click()   为点击事件绑定一个事件处理函数&#xff0c;或者触发元素点击事件。   .click( handler(eventObject) )     handler(eventObject)       每次事件触发时候执行的函数。   .click([eventData],handler(eventObject))     eventData      …

[LaunchPad] 超声波测试,数码管显示

1 #include "io430g2553.h"2 3 unsigned char Disp_Tab[] {0x3f,0x06,0x5b,0x4f,0x66,0x6d,0x7d,0x07,0x7f,0x6f,0x40}; //段码控制 4 unsigned char dispbit[8]{0xfe,0xfd,0xfb,0xf7,0xef,0xdF,0xbF,0x7F}; //位选控制 5 6 unsigned char LedOut[4];7 8 …

Spring的依赖注入陷阱

Spring框架中有三种注入变量&#xff1a; 基于二传手的注射 基于构造函数的注入 基于现场的注入 这些机制中的每一种都有优点和缺点&#xff0c;并且不仅只有一种正确的方法。 例如现场注入&#xff1a; Autowired private FooBean fooBean;在生产代码中使用它通常不是最好…

jquery 操作css 选择器

.addClass()   为每个匹配的元素添加指定的样式类名   .addClass(className)     className 为每个匹配元素所有增加的一个或多个样式名   .addClass(function(index,currentClass))     函数返回一个或者多个用空格隔开&#xff0c; index 表示参数匹配中的索引…

vim设置

一、基本编辑功能1、复制、剪切和粘贴复制特定的某一段&#xff1a;把光标移到要复制的文本的头部&#xff0c;按下“v”&#xff0c;往后移动光标&#xff0c;光标所过之处的字符>都会高亮&#xff0c;移到欲复制文本的尾部后&#xff0c;按下“y”&#xff0c;高亮文本全部…