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. Intro.js 分步向导插件使用方法

    简介 为您的网站和项目提供一步一步的.更好的介绍 Intro.js 目前兼容 Firefox.Chrome 和 IE8,不兼容 IE6 和 IE7,后续版本将会提供更好的兼容. 在线演示及下载 在线演 ...

  2. 4.Thymeleaf的常用标签

    一.常用标签 二.foreach案例 1.创建项目 2. 创建Student.java package cn.kgc.pojo; /** * Created by Administrator on 2 ...

  3. Bootstrap内联表单

    有时候我们需要将表单的控件都在一行内显示,就需要将表单控件设置成内联块元素(display:inline-block). 在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<f ...

  4. python数据标准化

    def datastandard(): from sklearn import preprocessing import numpy as np x = np.array([ [ 1., -1., 2 ...

  5. JavaScript向window onload添加加载函数

    有时候我们需要在页面加载事件后完成一些函数操作,对于函数比较多的情况下可以写一个统一的加载函数 .本函数来自于JavaScript DOM 编程艺术: function addLoadEvent(fu ...

  6. 0726xtrbackup实例详解

    转自http://www.cnblogs.com/olinux/p/5207887.html MySQL中的xtrabackup的原理解析 xtrabackup的官方下载地址为 http://www. ...

  7. [Angular] Advanced DI

    In this post, we are going to see how to solve one design pattern challenge. The challenge is what w ...

  8. 支持中文的基于词为基本粒度的前缀树(prefix trie)python实现

    Trie树,也叫字典树.前缀树.可用于"predictive text"和"autocompletion".亦可用于统计词频(边插入Trie树边更新或加入词频) ...

  9. UVa 11466 - Largest Prime Divisor

    題目:給你一個整數n(不超過14位).求出他的最大的素數因子.假设仅仅有一個素數因子輸出-1. 分析:數論. 直接打表計算10^7內的全部素數因子,然後用短除法除n.記錄最大的因子就可以. 假设最後下 ...

  10. Storm集群组件和编程模型

     Storm工作原理: Storm是一个开源的分布式实时计算系统,常被称为流式计算框架.什么是流式计算呢?通俗来讲,流式计算顾名思义:数据流源源不断的来,一边来,一边计算结果,再进入下一个流. 比 ...