angularjs 常用功能练习
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>angularjs练习</title>
</head>
<body ng-controller="ctrl">
<div> </div>
<script src="~/Scripts/angular.min.js"></script>
<script>
var app=angular.module('app', []);
app.controller('ctrl', function ($scope) { });
</script>
</body>
</html>
单选：
<input type="radio" name="sex" ng-model="sex" value="男" />男
<input type="radio" name="sex" ng-model="sex" value="女" />女
{{sex}}
复选：
<input type="checkbox" ng-model="data.open" ng-true-value="" ng-false-value=""/>开
<input type="checkbox" ng-model="data.close" ng-true-value="" ng-false-value="" />关
$scope.data = {open:,close:};
下拉框：
<select ng-model="user" ng-options="v.age as v.name for v in data"></select>
{{user}} $scope.data = [
{ name: "张三", age: },
{ name: "李四", age: },
{ name: "王五", age: },
]
$scope.user = ;//设定下拉默认值
还可以这样：
<select ng-model="user">
<option value="">请选择</option>
<option ng-repeat="v in data" ng-value="{{v.age}}">{{v.name}}</option>
</select>
{{user}}
如果网页加载速度慢，使用angularjs页面会看到很多”{{}}“，可以通过 ng-cloak 在加载时隐藏：
.......
<style>
.ng-cloak {
display: none;
}
</style>
</head>
<body ng-controller="ctrl" class="ng-cloak">
....
- angular.lowercase：将字符串转换为小写
angular.uppercase：将字符串转换为大写
angular.forEach(obj, iterator, [context])：遍历对象集合，该函数包括三个参数，第一个参数表示需要遍历的对象或数组，第二个参数为一个函数，第三个对象为当前的上下文环境（this）；var values = {name: 'misko', gender: 'male'};
var log = [];
angular.forEach(values, function(value, key) {
this.push(key + ': ' + value);
}, log);
expect(log).toEqual(['name: misko', 'gender: male']);angularisUndefinedvalue
- .();判断value是否为一个对象，不包括null
angularisStringvalue - .();判断value是否为Number类型
angularisDatevalue - .();判断value是否为数组
angularisFunctionvalue - .();判断value是否为一个DOM元素，包括JQuery封装的DOM
angular.equals(o1, o2);判断两个对象是否相等
满足下列条件之一的，都视为两个对象相等。
- o1===o2 返回true
- o1和o2的所有属性通过angular.equals比较都相等
- o1,o2都是NAN
- 两个同样的正则（/abc/=/abc/） 在JavaScript中返回false，在angular中返回true
13..(,);将对象转换为json，obj：需要转换的对象，pretty：true或一个数字，true表示保留对象属性值中的空格和换行，设置为一个数字表示去掉空格和换行。默认值为2，即去除空格和换行。
addClass()after()append()attr()-
Does not support functions as parametersbind()-
Does not support namespaces, selectors or eventDatachildren()-
Does not support selectorsclone()contents()css()-
Only retrieves inline-styles, does not callgetComputedStyle()data()detach()empty()eq()find()-
Limited to lookups by tag namehasClass()html()next()-
Does not support selectorson()-
Does not support namespaces, selectors or eventDataoff()-
Does not support namespaces or selectorsone()-
Does not support namespaces or selectorsparent()-
Does not support selectorsprepend()prop()ready()remove()removeAttr()removeClass()removeData()replaceWith()text()toggleClass()triggerHandler()-
Passes a dummy event object to handlers.unbind()-
Does not support namespacesval()wrap()
提交表单：
<input ng-model="data.username" />
<input ng-model="data.age" /> <button ng-click="add()">添加</button>
<script>
angular.module('app', [])
.controller('ctrl', function ($scope, $http) {
$scope.add = function () {
$http.post("/home/data", angular.toJson($scope.data)).then(function (res) {
alert(res.data);
});
} });
</script>
.net 接受前台请求：
public ActionResult data(string username,string age)
{
return Content(username + ":" + age);
}
使用angular.toJson把对象转成Json字符串后向后台提交，如果表单内容很多，可以像上面使用data对象使代码量减少很多,如果添加更多属性，可以使用angular.extend:
$scope.add = function () {
angular.extend($scope.data, { id: });
alert($scope.data)
var obj = angular.toJson($scope.data);
$http.post("/home/data", obj).then(function (res) {
alert(res.data);
});
}
样式：
<li ng-repeat="(k,v) in list" style="{{$even?'color:red':''}}">
{{k.name}}
</li>
<table>
<tr ng-repeat="v in list">
<td ng-class="{red:v.age>20}">{{v.name}}</td>
<td>{{v.age}}</td>
<td></td>
</tr>
</table>
如果angularjs数组有重复项，则显示数组时不显示，可以使用track by $index:
$scope.arr = ['a', 'b', 'c', 'a']; <li ng-repeat="v in arr track by $index">
{{v}}
</li>
全选和反选：
<ul>
<li><input type="checkbox" ng-model="all" /></li>
<li ng-repeat="v in [1,2]">
<input type="checkbox" ng-checked="all" />
</li>
</ul>
过滤器：
<span>{{"abcdefg"|uppercase}}</span>
<div>{{4324.2432|number:}}</div>
<div>{{"abcdefg"|limitTo::}}</div>
<div>{{d|date:'yyyy-MM-dd HH:dd:ss'}}</div>
<div>{{arr|orderBy:false}}</div>
<div>{{list|orderBy:'name':false}}</div>
<div>{{list|filter:''}}</div>
angular.module('app', [])
.controller('ctrl', function ($scope, $http) {
$scope.arr = [, , , , , ];
$scope.list=[{name:"张三",age:},{name:"张3三",age:},{name:"张2三",age:},{name:"张1三",age:}]
$scope.d = new Date().getTime();
});
排序：
<div>
<div>{{list}}</div>
<button ng-click=orderby()">按年龄排序</button>
</div> <script>
angular.module('app', [])
.controller('ctrl', ['$scope', '$http', '$filter', function ($scope, $http, $filter) { $scope.list=[{name:"张三",age:},{name:"李四",age:},{name:"王五",age:},{name:"赵六",age:}] $scope.orderby = function () {
if (arguments.callee["age"] == undefined) {
arguments.callee["age"] = false;
}
arguments.callee["age"] = !arguments.callee["age"];
$scope.list = $filter('orderBy')($scope.list, 'age', arguments.callee["age"]);
} }]);
</script>
arguments.callee是保存点击状态的，有点像静态变量，每次点击其保存的变化值 ，点击改变排序，显示将会从小到大或从大到小来回切换排序，此方法可以应用到表格显示数据中，如下：
<table>
<tr>
<th ng-click="orderby('name')">姓名</th>
<th ng-click="orderby('age')">年龄</th>
</tr>
<tr ng-repeat="item in list">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table> <script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/underscore.js"></script>
<script>
angular.module('app', [])
.controller('ctrl', ['$scope', '$http', '$filter', function ($scope, $http, $filter) {
$scope.list = [{ name: "张三", age: }, { name: "李四", age: }, { name: "王五", age: }, { name: "赵六", age: }]
$scope.orderby = function (field) {
if (arguments.callee[field] == undefined) {
arguments.callee[field] = false;
}
arguments.callee[field] = !arguments.callee[field];
$scope.list = $filter('orderBy')($scope.list, field, arguments.callee[field]);
}
}]);
</script>
还可以如下方式：
angular.module('app', [])
.controller('ctrl', ['$scope', '$http', '$filter', function ($scope, $http, $filter) {
$scope.list = [{ name: "张三", age: }, { name: "李四", age: }, { name: "王五", age: }, { name: "赵六", age: }]
$scope.status = { name: false, age: false };
$scope.orderby = function (field) {
$scope.status[field] = !$scope.status[field];
$scope.list = $filter('orderBy')($scope.list, field, $scope.status[field]);
}
}]);
搜索：
html: <div>
<input ng-model="key" />
<table>
<tr ng-repeat="item in list|filter:key">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td></td>
</tr>
</table>
</div>
js:
angular.module("app", []).controller("ctrl", function ($scope) {
$scope.age = ;
$scope.name = "wzh"; $scope.list = [
{name:"wzh",age:},
{name:"zh",age:},
{name:"wz",age:},
{name:"qq",age:},
{name:"zza",age:}
] })
$watch:监听变量变化
<input ng-model="title" />{{error}}
$scope.$watch("title", function (n, o) {
$scope.error = n.length > ? "不能超过3" : "";
});
监听对象
<input ng-model="data.title" />{{error}}
$scope.$watch("data", function (n, o) {
$scope.error = n.title.length > ? "不能超过3" : "";
},true);
自定义过滤器：把手机号码后几位用*代替
<div>{{“”|truncate:}}</div>
app.filter("truncate", function () {
return function (v, len) {
len=len?len:;
return v.substr(,-len) + new String("*").repeat(len);
}
})
指令，
app.directive("hello", function () {
return {
template: "<div>{{name}}<input ng-model=name>",
scope: {}
}
})
指令中的scope很重要，
scope参数是可选的，默认值为false，可选true、对象{}；
false：共享父域
true：继承父域，且新建独立作用域
对象{}：不继承父域，且新建独立作用域
app.directive("test",function(){
return {
restrict : "E",
template : '<div name="{{name}}"></div>',
replace : true,
scope : {
name : "@"
}
}
<div ng-controller="mytest">
父：<input type="text" ng-model="data.name" />
<test></test>
</div>
app.directive("test",function(){
return {
restrict : "E",
template : '<div data="data">子指令:<input ng-model="data.name" /></div>',
replace : true,
scope : {
data : "="
}
}
“=”有双重绑定的功能,比如mytest控制器与test子指令进行双重绑定
<div ng-controller="mytest">
<test></test>
</div> app.controller("mytest", function ($scope) {
$scope.getName = function(){
console.log("jack");
}
}); app.directive("test",function(){
return {
restrict : "E",
template : '<div get-name="getName()">子指令:<a href="javascript:void(0)" ng-click="getName()">点击调用父方法</a></div>',
replace : true,
scope : {
getName : "&"
},
controller : function($scope){
$scope.getName(); //"jack"
},
link : function ($scope) {
$scope.getName(); //"jack"
}
}
});
“&”的意思是子指令能调用父控制器的方法,这里的指令template元素点击调用控制器的getName方法
指令中的控制器
var app = angular.module("app", []);
app.directive("rere", [function () {
return {
retrict:"AE",
templateUrl: '../html/1.html',
controller: function ($scope) {
$scope.list = [{ name: "张三", id: }, { name: "张三", id: } ]
}
}
}]);
1.html文件中：
<table>
<tr ng-repeat="item in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</table>
ng-transclude
html:
<div><h1 test age="">我是原来内容</h1></div> js:
app.directive("test", function () {
return {
template: "<div ><span ng-transclude ></span> {{age}} </div>",
transclude:true,
scope:{age:"="}
}
});
指令中Link使用：
<div>
<hello smallstr="wzh" bgcolor="green" fontcolor="#fff">今天我最大</hello>
<hello smallstr="zl" bgcolor="blue" fontcolor="#aaa">最好是今天</hello>
<hello smallstr="qing" bgcolor="red" fontcolor="#fff">星期一</hello>
<hello smallstr="xingni" bgcolor="yellow" fontcolor="#000">大家都回家</hello>
</div>
app.directive("hello", function () {
return {
link:function(scope,elem,attr){
elem.css({ color: attr['fontcolor'] ,background:attr['bgcolor']}).html(elem.text()+"<small>"+attr["smallstr"]+"</small>");
}
}
})
可以简写成：
app.directive("hello", function () {
return function (scope, elem, attr) {
elem.css({ color: attr['fontcolor'], background: attr['bgcolor'] }).html(elem.text() + "<small>" + attr["smallstr"] + "</small>");
}
});
做一个大一点的练习---tab标签，整个TAB标签就是用指令写成。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<style>
body {
}
</style>
</head>
<body ng-app="app" ng-controller="ctrl"> <wzhtab></wzhtab>
<script>
var app = angular.module("app", []);
app.controller("ctrl", function ($scope) { });
app.directive("wzhtab", function () {
return {
templateUrl: "http/wzhtab.html",
link: function (scope, elem, attr) {
$(elem).on("click", "a", function () {
$("a").removeClass("active");
$(this).addClass("active");
var index = $(this).index();
$(elem).find(".lists").hide().eq(index).show();
});
},
controller: function ($scope) {
$scope.list = [
{
title: "培训", data: [
{ title: "asp.net", id: },
{ title: "PHP", id: }
]
},
{
title: "学习", data: [
{ title: "asp.net", id: },
{ title: "PHP", id: }
]
},
]
}
}
}); </script>
</body>
</html>
wzhtab.html
<style>
a {
border: 1px solid #;
padding: 5px 10px;
margin: ;
} a.active {
background: #;
color: #fff;
} .lists {
border: 1px solid #;
width: 300px;
height: 100px;
padding: 20px;
margin-top: 5px;
}
</style> <div>
<a ng-repeat="item in list" href="#" ng-class="{active:$first}">{{item.title}}</a>
<div class="lists" ng-repeat="item in list" ng-style="{display:$first?'block':'none'}">
<ul>
<li ng-repeat="v in item.data">{{v.id}}.{{v.title}}</li>
</ul>
</div>
</div>
在指令link中使用jquery ，可以$(elem)，由于模板中元素是后添加，在指令 link操作dom事件时，使用了on绑定函数
问题：能不能使用普通jquery改变angularjs中的变量，并且显示数据出自动发生改变呢？
比如如下：用 angularjs事件方法，可以在button上添加ng-click="change()" ，可以改变，如果不用这种方法，使用jquery方法，这时name属性值已经发生了变化，但不会更新到界面上。
<div>
{{name}}
<button id="btn">改变</button>
</div> var app = angular.module("app", []);
app.controller("ctrl", function ($scope) {
$scope.name = "aaa";
//$scope.change = function () {
// $scope.name = "bbb";
//} $("#btn").click(function () {
$scope.name = "bbb";
});
});
如果想更新到界面上，可以使用$apply()
$("#btn").click(function () {
$scope.name = "bbb";
$scope.$apply();
});
angularjs 常用功能练习的更多相关文章
- AngularJS进阶(十二)AngularJS常用知识汇总(不断更新中....)
AngularJS常用知识汇总(不断更新中....) 注:请点击此处进行充电! app.controller('editCtrl',['$http','$location','$rootScope', ...
- WebStorm 常用功能的使用技巧分享
WebStorm 是 JetBrain 公司开发的一款 JavaScript IDE,使用非常方便,可以使编写代码过程更加流畅. 本文在这里分享一些常用功能的使用技巧,希望能帮助大家更好的使用这款强大 ...
- AVA正则表达式4种常用功能
正则表达式在字符串处理上有着强大的功能,sun在jdk1.4加入了对它的支持 下面简单的说下它的4种常用功能: 查询: String str="abc efg ABC"; Str ...
- [转]WebPack 常用功能介绍
概述 Webpack是一款用户打包前端模块的工具.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑.打包其他的静态资源,包括css.image.font file.templa ...
- FastReport.Net 常用功能总汇
一.常用控件 文本框:输入文字或表达式 表格:设置表格的行列数,输入数字或表达式 子报表:放置子报表后,系统会自动增加一个页面,你可以在此页面上设计需要的报表.系统在打印处理时,先按主报表打印,当碰到 ...
- 带你走近AngularJS - 基本功能介绍
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- python3 字符串与列表常用功能
一.字符串常用功能 1. capitalize(),将字符串的首字母变成大写,其余全部置为小写:如果字符串中有多个单词,也只是将第一个单词的首字母置为大写:例: >>> name = ...
- matlab进阶：常用功能的实现，常用函数的说明
常用功能的实现 获取当前脚本所在目录 current_script_dir = fileparts(mfilename('fullpath')); % 结尾不带'/' 常用函数的说明 bsxfun m ...
- WebPack常用功能介绍
概述 Webpack是一款用户打包前端模块的工具.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑.打包其他的静态资源,包括css.image.font file.templa ...
随机推荐
- 20155214曾士轩 2016-2017-2 《Java程序设计》第1周学习总结
20155214曾士轩 2006-2007-2 <Java程序设计>第1周学习总结 教材学习内容总结 浏览教材,根据自己的理解每章提出一个问题 1.标准API的架构指的是什么? 2.一个项 ...
- 20155327 实验一《Java开发环境的熟悉》实验报告
实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 实验知识点 JVM.JRE.JDK的安装位置与区别: 命令行运行javac:jav ...
- Microsoft .NET Framework 4 安装 1603错误的解决
首先找到 C:\Windows\SoftwareDistribution\Download"这个文件夹,把里面的东西全删除了,然后把你更新失败的 NET Framework 4卸载了,然后 ...
- 移除VS解决方案和TFS服务器的关系
有时候会遇到服务器IP服务器变更,甚至TFS服务器坏了,或者将项目重新上传至新的TFS区: 可以使用notepad之类的软件打开解决方案(.sln文件),删掉类似下面的部分: GlobalSectio ...
- Luogu3804 【模板】后缀自动机
题面 题解 一个串的出现次数等于$endpos$的大小,也是$parent$树上节点的$size$大小, 构建出后缀自动机,按拓补序,模拟即可. 代码 #include<cstdio> # ...
- 【LG3243】[HNOI2015]菜肴制作
题面 洛谷 题解 首先我们有个非常显然的思路, 就是直接拓扑排序,用小根堆代替队列再按顺序输出,但是很显然是错的, 因为这只保证了字典序最小,而无法保证答案最优,\(<2,4>,<3 ...
- Pandas v0.23.4手册汉化
Pandas手册汉化 此页面概述了所有公共pandas对象,函数和方法.pandas.*命名空间中公开的所有类和函数都是公共的. 一些子包是公共的,其中包括pandas.errors, pandas. ...
- python开发ftp服务器第一天(pyftpdlib)
学习了大约快一个月的python,现在开始有意识做一些项目.(我的新书<Python爬虫开发与项目实战>出版了,大家可以看一下样章) 据我了解,python现在更多的是用于自动化运维方面, ...
- nginx基础配置加基础实战演示
目录 基本配置 设置用户 工作衍生进程数 错误日志存放路径 pid文件存放路径 设置最大连接数 http->server gzip 字符编码 nginx的基本格式 实战配置 虚拟主机配置 开始配 ...
- Iterable/Iterator傻傻分不清
区别可迭代对象和迭代器 1.判断是否可以迭代 from collections import Iterabledef fid(times): n = 0 a , b = 0,1 while n < ...