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 ...
随机推荐
- Intro.js 分步向导插件使用方法
简介 为您的网站和项目提供一步一步的.更好的介绍 Intro.js 目前兼容 Firefox.Chrome 和 IE8,不兼容 IE6 和 IE7,后续版本将会提供更好的兼容. 在线演示及下载 在线演 ...
- 4.Thymeleaf的常用标签
一.常用标签 二.foreach案例 1.创建项目 2. 创建Student.java package cn.kgc.pojo; /** * Created by Administrator on 2 ...
- Bootstrap内联表单
有时候我们需要将表单的控件都在一行内显示,就需要将表单控件设置成内联块元素(display:inline-block). 在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<f ...
- python数据标准化
def datastandard(): from sklearn import preprocessing import numpy as np x = np.array([ [ 1., -1., 2 ...
- JavaScript向window onload添加加载函数
有时候我们需要在页面加载事件后完成一些函数操作,对于函数比较多的情况下可以写一个统一的加载函数 .本函数来自于JavaScript DOM 编程艺术: function addLoadEvent(fu ...
- 0726xtrbackup实例详解
转自http://www.cnblogs.com/olinux/p/5207887.html MySQL中的xtrabackup的原理解析 xtrabackup的官方下载地址为 http://www. ...
- [Angular] Advanced DI
In this post, we are going to see how to solve one design pattern challenge. The challenge is what w ...
- 支持中文的基于词为基本粒度的前缀树(prefix trie)python实现
Trie树,也叫字典树.前缀树.可用于"predictive text"和"autocompletion".亦可用于统计词频(边插入Trie树边更新或加入词频) ...
- UVa 11466 - Largest Prime Divisor
題目:給你一個整數n(不超過14位).求出他的最大的素數因子.假设仅仅有一個素數因子輸出-1. 分析:數論. 直接打表計算10^7內的全部素數因子,然後用短除法除n.記錄最大的因子就可以. 假设最後下 ...
- Storm集群组件和编程模型
Storm工作原理: Storm是一个开源的分布式实时计算系统,常被称为流式计算框架.什么是流式计算呢?通俗来讲,流式计算顾名思义:数据流源源不断的来,一边来,一边计算结果,再进入下一个流. 比 ...