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 常用写法的更多相关文章

  1. 转--Android按钮单击事件的四种常用写法总结

    这篇文章主要介绍了Android按钮单击事件的四种常用写法总结,比较了常见的四种写法的优劣,有不错的参考借鉴价值,需要的朋友可以参考下     很多学习Android程序设计的人都会发现每个人对代码的 ...

  2. 【Android】按钮点击事件的常用写法

    学习总结: 最近学习了Android点击事件的常用写法.点击事件会触发监听对象身上的回调,常用写法有以下四种: 方法一:使用匿名内部类. public class MainActivity exten ...

  3. MyBatis 常用写法

    MyBatis 常用写法 1.forEach 循环   forEach 元素的属性主要有 item, idnex, collection, open, separator, close. collec ...

  4. jquery常用写法简单记录

    好久不写东西了......话不多说,主要记录一下,最近做的项目中用到的js的记录(虽然特别特别简单) 一 jquery常用写法记录 jQuery(this).addClass("select ...

  5. Android按钮单击事件的四种常用写法

    这篇文章主要介绍了Android按钮单击事件的四种常用写法总结,比较了常见的四种写法的优劣,有不错的参考借鉴价值,需要的朋友可以参考下 很多学习Android程序设计的人都会发现每个人对代码的写法都有 ...

  6. angularjs中ng-class常用写法,三元表达式、评估表达式与对象写法

     壹 ❀ 引 ng-class可以说在angularjs样式开发中使用频率特别高了,这不我想利用ng-class的三元运算符的写法来定义一个样式,结果怎么都想不起来正确写法,恼羞成怒还是整理一遍吧,那 ...

  7. python time和datetime常用写法格式

    python 的time和datetime常用写法 import time from datetime import datetime from datetime import timedelta # ...

  8. mongodb java操作常用写法

    MongoDB 将数据存储为一个文档,数据结构由键值(key=>value)对组成.MongoDB 文档类似于 JSON 对象.字段值可以包含其他文档,数组及文档数组.下面介绍的是用java操作 ...

  9. Angular常用命令

    一. Angular常用命令 1. ng new 文件夹名 (新建项目,选择y使用路由) 2. ng serve --open (默认浏览器运行项目) 3. ng serve --port 6060  ...

随机推荐

  1. 关于 多个git用户或多个git管理工具切换时出现的问题总结

    在这几天遇到了个比较头痛的问题 因为在同时使用多个git工具(gitlab,github.gitee)由于账户的问题和这个仓库指定地址,导致拉代码和推代码不能正常运行 问题解决: 对于多个git直接的 ...

  2. vue+ElementUI 日期选择器 获取时间戳

    <div class="block"> <span class="demonstration">daterange</span&g ...

  3. 【例题 4-4 uva 213】Message Decoding

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 输入的二进制长度最长为7 所以得开个sta[7][2^7]的样子才存的下所有的字符的.. 定义这么一个数组当字典. 然后一个字符一个 ...

  4. 字体大小之px、em、rem、pt,字号详解

    PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Pe ...

  5. HDU 4521

    就是那个O(nlogn)的LIS算法. #include <iostream> #include <cstdio> using namespace std; int dt[10 ...

  6. POJ 3678

    这道题唯一一个注意的地方是,如出现X\/Y=0这种关系时,X=0,Y=0.已经是可以肯定的关系了,所以可以连边X->-X. 我也错了上面这地方.看来,还不够.以后要细心才好. #include ...

  7. 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 ...

  8. Cookies操作类

    实现代码: //声名一个数据集合 var listString = new List<string>() { "a", "b", "c&q ...

  9. Sublime Text 2 界面主题 推荐 Flatland

    先搜索下THEME-FLATLAND 安装完后在preferences中选择settings-usr { "color_scheme": "Packages/Theme ...

  10. javascript设计模式-单体模式

    场景:假设有一个Girl(美女)实体,该实体拥有姓名.年龄两个属性,拥有显示姓名和洗澡两个方法,下面分步骤构造该实体. 1.用简单基本单体模式: var Girl1 = { name:"昭君 ...