为您找到搜索结果：6311个
angular学习笔记(十四)-$watch(4)
如果需要同时监测多个属性或者对象,并且执行的是同样的回调,可以有两种选择:1.监测这些属性连接起来之后的值:$scope.$watch('objOne.a+objTwo.b+...',watchCallback);这个表达式可以无限长,但如果非常长的时候,应该把它们放在一个函数的返回值里,而不是写一个很长很长的表达式2.把需要被监测的属性放到一个数组或者对象里.给$watch传入第三个参数为true:$scope.$watch('obj',watchCallback,true)其中,obj可以是对象,也可以是数组...
angular学习笔记(十四)-$watch(3)
同样的例子,还可以这样写:<!DOCTYPEhtml><htmlng-app><head><title>11.3$watch监控数据变化</title><metacharset="utf-8"><scriptsrc="../angular.js"></script><scriptsrc="script.js"></script></head><body><divng-controller="CartController"><h1>yourshoppingcart</h1><table><trng-repeat="iteminitems"><td>{{item.title}}</td><td><inputng-model="item.quantity"/></td><td>{{item.price|currency}...
angular学习笔记(十四)-$watch(2)
下面来看一个$watch的比较复杂的例子:还是回到http://www.cnblogs.com/liulangmao/p/3700919.html一开始讲的购物车例子,给它添加一个计算总价和折扣的功能,如果总价超过500,则优惠10%:代码如下:<!DOCTYPEhtml><htmlng-app><head><title>11.1$watch监控数据变化</title><metacharset="utf-8"><scriptsrc="../angular.js"></script><scriptsrc="script.js"></script></head><body><divng-controller="CartController"><h1>yourshoppingcart</h1><table><trng-repeat="iteminitems"><td>{{item...
angular学习笔记(十四)-$watch(1)
本篇主要介绍$watch的基本概念:$watch是所有控制器的$scope中内置的方法:$scope.$watch(watchObj,watchCallback,ifDeep)watchObj:需要被检测的对象,可以是以下任意一种:1.某个数据,监测这个数据的值是否发生变化2.一条angular表达式,监测表达式的结果是否发生变化3.函数(),监测函数的返回值是否发生变化注意,以上三种,无论是哪种,都应该是字符串格式,并且都是在$scope作用域下执行的.4.函数,非字符串格式,而是直接传入一个函数,可以直接写一个匿名函数,也可以传入一个函数,注意,它不是在$scope作用域下的,所以,如果传入的是当前作用域下的函数,还是需要写:$scope.funwatchCallback :接受一个函数或者表达式,当watchObj发生变化是会被调用或执行.如果是函数形式,它会收到三个参数:watchCallback (newValue,oldValue,scope)newValue: watchObj的新的值 oldValue: watchObj...
angular学习笔记(十三)
本篇主要介绍控制器的$scope中的数据是如何被改变的:以下三种方法,都可以改变$scope中的number值:1.表达式:<spanng-click="number=number+3">点击改变值1</span>2.回调函数:<spanng-click="computeNum()">点击改变值2</span>$scope.computeNum=function(){ $scope.number=$scope.number+3}3.input元素的ng-model属性:<inputtype="text"ng-model="number"/>完整代码:<!DOCTYPEhtml><htmlng-app><head><title>10.1$scope数据控制</title><metacharset="utf-8"><scriptsrc="../angular.js"></script><scriptsrc="script.js"...
angular学习笔记(十二)-控制器
本篇主要介绍控制器:控制器在前面的例子中已经大量的用到,它的作用主要是:控制某块视图,通过$scope向这块视图提供数据,函数,并且监视需要被检测的部分,当发生变化时,做出相应的动作,从而起到控制该部分视图的作用为了保持控制器的最小化和可管理,应该为视图中的每个功能都创建一个控制器,比如,有一个菜单,就创建一个menuController,有一个导航,就创建一个NavController... 控制器可以内嵌,比如:<divng-controller="ParentController"><h3>{{title}}</h3><divng-controller=SonController><h5>{{title}}</h5><div></div>functionParentController($scope){$scope.title='IamParentController';}functionSonController($scope){$scope.title='IamSonCo...
angular学习笔记(十一)-表达式
本篇只要介绍angular表达式:在之前的例子中,我们多半是直接把数据作为angular标识符的值,但其实可以使用表达式来做更多的事情:比如:{{number}} 也可以是: {{number+10}}(将数据进行简单的运算)也可以是:{{someFun()/10}}(调用方法得到结果,同时经过简单运算)又比如:ng-class={hight:ifHigh}也可以是: {hight:$index%4>=compute($index)}(调用方法,简单运算,传入参数) 以上这些仅仅是举例,表达式虽然方便,但实际中应该尽量把带有逻辑的运算放入控制器中,而不是在ui中进行.表达式是用angular自定义的解析方式计算的,不是javascript的eval(),因此是有限的.只限用于一些基本,简单的操作,比如:计算(+,-,*,/%)比较(==,!=,<,>,>=,<=)布尔逻辑(&&,||,!)数组和对象([],{})调用方法,传入参数(fun(i)) 不能够使用:++,--,if,else,th...
angular学习笔记(十)-src和href处理
本篇主要介绍angular中图片的src和链接的href的处理:用到了以下两个属性:ng-src:绑定了数据的路径表达式ng-href: 绑定了数据的路径表达式例如: <!DOCTYPEhtml><htmlng-app><head><title>7.1src和href</title><metacharset="utf-8"><scriptsrc="../angular.js"></script><scriptsrc="script.js"></script><styletype="text/css">*{font-family:'MICROSOFTYAHEI';font-size:12px}</style></head><body><divng-controller="SrcHref"><imgng-src="./images/cats/{{favorite}}"/><a...
angular学习笔记(九)-css类和样式3
再来看一个选择li列表的例子:点击li中的任意项,被点击的li高亮显示:<!DOCTYPEhtml><htmlng-app><head><title>6.3css类和样式</title><metacharset="utf-8"><scriptsrc="../angular.js"></script><scriptsrc="script.js"></script><styletype="text/css">li.cur{background:#C0DCC0}</style></head><body><divng-controller="Restaurant"><ul><ling-repeat="restaurantinrestaurants"ng-class="{cur:$index==selRow}"ng-click="choose($index)"><span>{{res...
angular学习笔记(九)-css类和样式2
在上一个例子中,元素的类名使用拼接的方法,这样,类名中就不得不带有true或false,并且不易维护,所以,angular使用ng-class属性来控制元素的类名:我们来看一个小例子,点击error按钮,顶部提示错误框,点击warning按钮,顶部提示警告框.错误框的类名是.err,警告框的类名是.warn:<!DOCTYPEhtml><htmlng-app><head><title>6.2css类和样式</title><metacharset="utf-8"><scriptsrc="../angular.js"></script><scriptsrc="script.js"></script><styletype="text/css">*{font-family:'MICROSOFTYAHEI';font-size:12px}.tip{margin:auto;width:300px;height:30px;line-height:30px;text-al...
angular学习笔记(九)-css类和样式1
本篇主要介绍通过数据绑定来给元素添加特定的类名,从而应用特定的样式从一个最基本的例子来看:<!DOCTYPEhtml><htmlng-app><head><title>6.1css类和样式</title><metacharset="utf-8"><scriptsrc="../angular.js"></script><scriptsrc="script.js"></script><styletype="text/css">.submit-false{background:#efefef;color:#ccc}button{border:1pxsolid#ccc;outline:0}</style></head><body><divng-controller="ButtonDisable"><buttonclass="submit-{{disable}}"ng-click="deActive()">...
angular学习笔记(八)-控制视图显示隐藏
本篇介绍angular控制视图的显示和隐藏:通过给元素添加ng-show属性或者ng-hide属性来控制视图的显示或隐藏:ng-show:绑定的数据值为true时,显示元素,值为false时,隐藏元素ng-hide:绑定的数据值为true时,隐藏元素,值为false时,显示元素(其实只要用到其中一个就可以了)下面来看个简单的例子,点击按钮可以显示/隐藏元素:<!DOCTYPEhtml><htmlng-app><head><title>5.1.显示和隐藏</title><metacharset="utf-8"><scriptsrc="../angular.js"></script><scriptsrc="script.js"></script></head><body><divng-controller="ShowHide"><ul><buttonng-click="toggleShow()">{{text}}...
angular学习笔记(七)-迭代3
每个迭代项中还有以下三个变量:$first:判断是否是迭代第一项,如果是,得到true,如果不是,得到false$middle:判断是否迭代中间项(既不是第一项也不是最后一项的都是中间项),如果是,得到true,如果不是,得到false$last:判断是否是迭代最后项,如果是,得到true,如果不是,得到false然后继续刚才的实例,要求第一名的名字颜色显示粉红色,最后一名的名字颜色显示灰色,其余中间排名的都显示紫色:<!DOCTYPEhtml><htmlng-app><head><title>4.3.迭代</title><metacharset="utf-8"><scriptsrc="../angular.js"></script><scriptsrc="script.js"></script><styletype="text/css">.namea.truefirst{color:#FBCDCD}.namea.truelast{color:#ccc}....
angular学习笔记(七)-迭代2
视图的迭代和它的ng-repeat属性绑定的数据是实时绑定的,一旦数据发生了改变,视图也会立即更新迭代.还是刚才的那个例子,给它添加一个添加数据按钮和一个删除数据按钮.<!DOCTYPEhtml><htmlng-app><head><title>4.1.迭代</title><metacharset="utf-8"><scriptsrc="../angular.js"></script><scriptsrc="script.js"></script></head><body><divng-controller="StudentList"><ul><ling-repeat="studentinstudents"><spanclass="index">{{$index+1}}</span><spanclass="name"><ahref="/student/view/{{s...
angular学习笔记(七)-迭代1
本篇介绍angular中元素的迭代:<!DOCTYPEhtml><htmlng-app><head><title>4.1.迭代</title><metacharset="utf-8"><scriptsrc="../angular.js"></script><scriptsrc="script.js"></script></head><body><ulng-controller="StudentList"><ling-repeat="studentinstudents"><spanclass="index">{{$index+1}}</span><spanclass="name"><ahref="/student/view/{{student.id}}"class="name">{{student.name}}</a></span><spancl...