angular 常用写法
1、ng-repeat 数组数据中,不允许数组中有相同的两个数据,这个时候用下标去管理数据便可以解决这个问题
ng-repeat="item in list track by $index"
ng-repeat 自带的属性有 :
$index:下标; $first:第一个; $last:最后一个;
2、动态赋值 class 名
class ng-class="{'btn-info':item.isKill == 'Y'}";
第二种情况:
<li ng-repeat="item in list" class="{{$first? 'classOne': 'classTwo'}} {{$last? 'classOne': 'classTwo'}}"></li>
3、ng-click 中的 this
有时候要获取当前的这个元素,比如点击哪一个删除哪一个,要获取this。方法:
页面中:ng-click="changeKill($event.target)"
js中:$(target) 就是 $(this)
$scope.changeKill = function(target){
$(target).removeClass("btn-danger").addClass("btn-info");
$(target).text("是");
}
4、数据请求
get 请求:
$http.get('/api/user/showname2', {
params: {
name: '张三',
age: 'abc'
}
}).then(function (result) { //正确请求成功时处理
console.info(result);
alert(result.data);
}).catch(function (result) { //捕捉错误处理
console.info(result);
alert(result.data.Message);
});
5、有时候动态改变某一个状态的时候,视图不会发生改变。需要
$scope.$apply(function(){ }
在这个函数里面填写动态改变,$scope不需要注入。
6、复选框 和 单选框,在页面加载的时候就赋值上选中与不选中。
复选框(不判断):
<input type="checkbox" ng-model="true"> 新品
ng-model="true" 为选中
ng-model="false" 为不选中
复选框(判断):
<input type="checkbox" ng-model="chooseNew"> 新品
在 chontroller 中根据后台数据赋值 chooseNew
$scope.chooseKill = $scope.list.isKill == 'Y' ? true : false;
单选框(不判断):
<input type="radio" name="" ng-checked="true" value="option1"> 上架
true为选中,false 为不选中
单选框(判断):
<input type="radio" name="" ng-checked="chooseLine" value="option1"> 上架
在 chontroller 中根据后台数据赋值 chooseLine
$scope.chooseLine = $scope.list.isOnLine == 'Y' ? true : false;
or
<input type="radio" name="" ng-checked="user.sex==='1'" value="option1"> 男
<input type="radio" name="" ng-checked="user.sex==='0'" value="option1"> 女
后台传递的数据有一个 sex 是几,是1就代表男选中,0就代表女选中。
7、{{}} 和 ng-bind 实现了双向数据绑定。但是{{}} 有时候页面没加载出来的时候会出现在页面上,
非常不好看,用ng-bind变可以解决这一个问题
8、不同控制器如何调用或者公用一个数据或者函数,service factory
angular.module('app',[]).factory('Data',function(){
return {
shopCart: ['商品1','商品2','商品3'] //可以操作,只要返回就行
}
}).service('user',function(){
this.list = [];
this.getNum = function(){ }
//用service 的话在 service 里面写什么参数例如 user 在控制器中也要把这个 穿进去
}).controller('oneCtrl',function($scoope,Data,user){ //下单页面
//$scoope.shopCart = ;
在控制器中直接 $scoope.shopCart 就可以访问数据
}).controller('oneCtrl',function($scoope,Data,user){ //购物车页面
//$scoope.data = Data;
});
在 controller 中要访问 factory 的时候要将 Data 注入到 controller 中。
shopCart 购物车数据,购物车数据在 购物车页面姚增删改,再下单页面也要,这样购物车数据就是两个页面公用的数据
9、用$watch 来监听一个事件
例如 input 值改变了就执行什么函数,利用 ng-model 绑定一个 值在input上,然后在 控制器里面监听这个 绑定的变量。
//角色变化监控
$scope.$watch('mainSelect',function(newValue,oldValue, scope){
console.log(oldValue);
//当js执行到 controller 的时候 $watch 会被执行一次,所以说第一次是不对的,没有改变也是执行的,用下边这种方法过滤第一次
if(oldValue == newValue ){
return;
}else{
loadReload();
} });
当js执行到 controller 的时候 $watch 会被执行一次,所以说第一次是不对的,没有改变也是执行的,用上边这种方法过滤第一次
http://www.angularjs.cn/A0a6
10、常用指令
ng-bind、ng-model、ng-show/hide、ng-if、ng-submit、ng-disabled、
ng-checked、ng-src、ng-href、ng-class、ng-selected、ng-change。
ng-src="{{list.pic}}" ;在双花括号里面写图片的路径,这个路径是后台传递过来的,也就是动态的。
ng-selected="true" 代表
<select>
<opation></opation>
<opation ng-selected="true"></opation>
<opation></opation>
</select>
代表下拉选择框默认选中第二个了。
11、ng-show
<div class="two_way_canlader panel animated slideInRight" ng-show="isShowDailog">
$scope.isShowDailog = false;
$scope.chooseDate = function(){
$scope.isShowDailog = !$scope.isShowDailog ;
}
angular 常用写法的更多相关文章
- 转--Android按钮单击事件的四种常用写法总结
这篇文章主要介绍了Android按钮单击事件的四种常用写法总结,比较了常见的四种写法的优劣,有不错的参考借鉴价值,需要的朋友可以参考下 很多学习Android程序设计的人都会发现每个人对代码的 ...
- 【Android】按钮点击事件的常用写法
学习总结: 最近学习了Android点击事件的常用写法.点击事件会触发监听对象身上的回调,常用写法有以下四种: 方法一:使用匿名内部类. public class MainActivity exten ...
- MyBatis 常用写法
MyBatis 常用写法 1.forEach 循环 forEach 元素的属性主要有 item, idnex, collection, open, separator, close. collec ...
- jquery常用写法简单记录
好久不写东西了......话不多说,主要记录一下,最近做的项目中用到的js的记录(虽然特别特别简单) 一 jquery常用写法记录 jQuery(this).addClass("select ...
- Android按钮单击事件的四种常用写法
这篇文章主要介绍了Android按钮单击事件的四种常用写法总结,比较了常见的四种写法的优劣,有不错的参考借鉴价值,需要的朋友可以参考下 很多学习Android程序设计的人都会发现每个人对代码的写法都有 ...
- angularjs中ng-class常用写法,三元表达式、评估表达式与对象写法
壹 ❀ 引 ng-class可以说在angularjs样式开发中使用频率特别高了,这不我想利用ng-class的三元运算符的写法来定义一个样式,结果怎么都想不起来正确写法,恼羞成怒还是整理一遍吧,那 ...
- python time和datetime常用写法格式
python 的time和datetime常用写法 import time from datetime import datetime from datetime import timedelta # ...
- mongodb java操作常用写法
MongoDB 将数据存储为一个文档,数据结构由键值(key=>value)对组成.MongoDB 文档类似于 JSON 对象.字段值可以包含其他文档,数组及文档数组.下面介绍的是用java操作 ...
- Angular常用命令
一. Angular常用命令 1. ng new 文件夹名 (新建项目,选择y使用路由) 2. ng serve --open (默认浏览器运行项目) 3. ng serve --port 6060 ...
随机推荐
- 关于 多个git用户或多个git管理工具切换时出现的问题总结
在这几天遇到了个比较头痛的问题 因为在同时使用多个git工具(gitlab,github.gitee)由于账户的问题和这个仓库指定地址,导致拉代码和推代码不能正常运行 问题解决: 对于多个git直接的 ...
- vue+ElementUI 日期选择器 获取时间戳
<div class="block"> <span class="demonstration">daterange</span&g ...
- 【例题 4-4 uva 213】Message Decoding
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 输入的二进制长度最长为7 所以得开个sta[7][2^7]的样子才存的下所有的字符的.. 定义这么一个数组当字典. 然后一个字符一个 ...
- 字体大小之px、em、rem、pt,字号详解
PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Pe ...
- HDU 4521
就是那个O(nlogn)的LIS算法. #include <iostream> #include <cstdio> using namespace std; int dt[10 ...
- POJ 3678
这道题唯一一个注意的地方是,如出现X\/Y=0这种关系时,X=0,Y=0.已经是可以肯定的关系了,所以可以连边X->-X. 我也错了上面这地方.看来,还不够.以后要细心才好. #include ...
- HDOJ1796 How many integers can you find(dfs+容斥)
How many integers can you find Time Limit: 12000/5000 MS (Java/Others) Memory Limit: 65536/32768 ...
- Cookies操作类
实现代码: //声名一个数据集合 var listString = new List<string>() { "a", "b", "c&q ...
- Sublime Text 2 界面主题 推荐 Flatland
先搜索下THEME-FLATLAND 安装完后在preferences中选择settings-usr { "color_scheme": "Packages/Theme ...
- javascript设计模式-单体模式
场景:假设有一个Girl(美女)实体,该实体拥有姓名.年龄两个属性,拥有显示姓名和洗澡两个方法,下面分步骤构造该实体. 1.用简单基本单体模式: var Girl1 = { name:"昭君 ...