【angularJS】学习笔记
一、一个html中多个ng-app
//对于ng-app初始化一个AngularJS程序属性的使用需要注意,在一个页面中AngularJS自动加载第一个ng-app,其他ng-app会忽略
//如果需要加载其他ng-app程序,需要手动添加初始化过程。
angular.bootstrap(document.getElementById("div2"), ['myApp2']);
angular.bootstrap(document,module,config); 正常参数是三个
第一个是dom对象,
第二个是模型对象,
第三个是配置。
这个module的名称可自己定义。
<div ng-app="myApp" ng-controller="myCtrl"> <input type="text" ng-model="first"/> <input type="text" ng-model="last"/> <br/> 姓名:{{ first + " " + last}} </div> <div id="userForm" ng-app="userForm" ng-controller="userController"> <input type="text" ng-model="username"/><br/> <input type="text" ng-model="password"/><br/> 用户名:{{username}}<br/> 密码: {{password}} </div> <script type="text/javascript"> var app = angular.module("myApp",[]); app.controller("myCtrl",function($scope){ $scope.first = "test"; $scope.last = "test"; }); var userApp = angular.module("userForm",[]); userApp.controller("userController",function($scope){ $scope.username = "test"; $scope.password = "test"; }); angular.bootstrap(document.getElementById("userForm"),['userForm']); </script>
二、select选择框
AngularJS 可以使用数组或对象创建一个下拉列表选项。
使用 ng-options 指令来创建一个下拉列表,列表项通过对象和数组循环输出,
也可以使用ng-repeat 指令来创建下拉列表。
对比:
<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>
<h1>你选择的是: {{selectedSite}}</h1> //selectedSite结果是x.url <select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>
<h1>你选择的是: {{selectedSite.site}}</h1> //selectedSite结果是x
<p>网址为: {{selectedSite.url}}</p>
ng-repeat 指令 是通过数组来循环 HTML 代码来创建下拉列表,
但 ng-options 指令 更适合创建下拉列表,它有以下优势:
使用 ng-options 选择的值是一个对象, ng-repeat 选择的值是一个字符串。
当选择值是一个对象时,我们就可以获取更多信息,应用也更灵活。
ngOptions用法详解,参考:https://www.cnblogs.com/laixiangran/p/4956751.html
ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上。
- 数组:
label for value in array
select as label for value in array
label group by group for value in array
select as label group by group for value in array
select as label group by group for value in array track by trackexpr
- 对象:
label for ( key , value ) in object
select as label for ( key , value ) in object
label group by group for ( key , value ) in object
select as label group by group for ( key , value ) in object
说明:
array / object: 数据源的类型,有数组和对象两种
value:迭代过程中,引用数组的项或者对象的属性值
key:迭代过程中,引用对象的属性名
label:选项显示的标签,用户可看到的
select:结果绑定到ngModel中,如果没有指定,则默认绑定value
group:group by的条件,表示按某条件进行分组
trackexpr:用于唯一确定数组中的迭代项的表达式
举例数组
$scope. supplierList = [
{ "ID": 0, "SupplierCode": 0, "SupplierName": "全部" },
{ "ID": 1, "SupplierCode": 0, "SupplierName": "金飞" },
{ "ID": 2, "SupplierCode": 0, "SupplierName": "喷飞" },
];
ng-options="item.ID as item.SupplierName for item in supplierList"
三、Table表格
ng-repeat 指令可以完美的显示表格。
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
如果需要对表格进行排序,我们可以添加 orderBy 过滤器:
<tr ng-repeat="x in names | orderBy : 'Country'">
angularjs table,点击行tr获取tr行数据
<tr ng-repeat="value in fahrplanList" ng-click="outBoundTableClick(this)">
$scope.outBoundTableClick = function (index) {
$scope.outBountData = $scope.outBoundDataList[index.$index];
}
也可以试下:
ng-click="setMemberEntityValue($index)"
$scope.setMemberEntityValue = function (index) {
var tds = $("input[name='member']").eq(index).parent().parent().find('td');
四、http post数据
1、数据传递问题:后端接收不到AngularJs中$http.post发送的数据,总是显示为null
检查了下,后台的模型,需要注意:
1、可序列化[DataContract(IsReference = true)] 、和用属性的方式,不要用字段
2、属性要和前端传递的完全一样。
Eg:
[DataContract(IsReference = true)] public class CKSVoyageSearchSelectModel { /// <summary> /// 前端路由key /// </summary> [DataMember] public string rkey { set; get; }
2、post多个参数
http.post 多个参数时:写在一块{}
Js代码:
var params = { rkey: $scope.rkey, rq: { Head: { Auth: "string", Errcode: 0, Errormessage: "" }, Data: { DepartureCode: $scope.condition.departure_code, }, } }; offlineBookingService.searchVoyage(params).then(function (rs) {
后台控制器代码:
[FrontAuthenticationAttrbute] [HttpPost] public ActionResult SearchVoyage(CommonBO<VoyageRequest> rq,string rkey) {} //不要出现有重载的函数 public ActionResult SearchVoyage(CommonBO<VoyageRequest> rq) {}
五、输入验证
AngularJS 表单和控件可以提供验证功能,并对用户输入的非法数据进行警告。
参考:https://www.cnblogs.com/zml-java/p/5644260.html
属性 |
描述 |
$dirty |
表单有填写记录 |
$valid |
字段内容合法的 |
$invalid |
字段内容是非法的 |
$pristine |
表单没有填写记录 |
六、AngularJS API
AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如:
- 比较对象
- 迭代对象
- 转换对象
全局 API 函数使用 angular 对象进行访问。以下列出了一些通用的 API 函数:
API |
描述 |
angular.lowercase() |
转换字符串为小写 |
angular.uppercase() |
转换字符串为大写 |
angular.isString() |
判断给定的对象是否为字符串,如果是返回 true。 |
angular.isNumber() |
判断给定的对象是否为数字,如果是返回 true。 |
$scope.$watch 监控模型变量:
$scope.$watch('passw1',function() {$scope.test();});
$scope.$watch('passw2',function() {$scope.test();});
$scope.$watch('fName',function() {$scope.test();});
$scope.$watch('lName',function() {$scope.test();});
$scope.test = function() {
if ($scope.passw1 !== $scope.passw2) {
$scope.error = true;
} else {
$scope.error = false;
}
七、AngularJS 调试
参考:
Angular调试技巧——借助chrome上的Batarang插件
angular学习第一天——安装batarang踩到的那些坑儿
【angularJS】学习笔记的更多相关文章
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--Guide教程系列文章索引
在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...
- AngularJs学习笔记--bootstrap
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
- AngularJs学习笔记--html compiler
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...
- AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
- AngularJs学习笔记--Using $location
原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...
- AngularJs学习笔记--unit-testing
原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...
随机推荐
- pip下载加速的方式
两种方式 一.临时方式 可以在使用pip的时候加参数-i https://pypi.tuna.tsinghua.edu.cn/simple. 例如下载或者更新: 下载:pip install -i h ...
- React 了解学习
1.nodejs安装程序https://nodejs.org/en/download/ create-react-app 类似 vs2017开发工具,集成了webpack 打包发布,loader和默认 ...
- wpf 对控件进行截图,获取快照
有时候我们项目,在执行某个操作后,会生成一些数据结果,如报表一类的东西,我们需要对结果进行保存,甚至是生成word文档. 那么首先获取到控件快照就最基本的条件. 生成快照的静态方法类 using Sy ...
- Hadoop之MapReduce流程
hadoopMapReduce 1. MapReduce流程 2. Shuffle流程 1. MapReduce流程 MapReduce流程 切片: 对数据进行逻辑划分,默认大小是一个block块大小 ...
- 亲密字符串之Javascript解法
本题为leetcode第859题,原题链接在此:https://leetcode-cn.com/problems/buddy-strings/submissions/ 给定两个由小写字母构成的字符串 ...
- 7.nth-of-type | nth-child?【CSS】
举例说明: <ul> <p>111</p> <span>222</span> <li>1</li> <li& ...
- Solr+ik分词支持特殊符号分词
在工具类(CharacterUtil.java)里,找到方法 identifyCharType,加入以下代码: } else if (ub == Character.UnicodeBlock.GREE ...
- [AIR] NativeExtension在IOS下的开发实例 --- Flex库项目的创建(二)
来源:http://bbs.9ria.com/thread-102038-1-1.html 上一章,我已经介绍了如果创建IOS库文件,并定义了两个方法ShowIconBadageNumber和Init ...
- Git创建工作目录与常用指令
1.创建工作目录与常用指令 工作目录(WorkSpace)一般就是你希望Git帮助你管理的文件夹,可以是你项目的目录,也可以是一个空目录,建议不要有中文. 日常使用只要记住下图6个命令: 2.提交管理 ...
- WLAN实验1:划分不同VLAN及Acess配置
实验环境 公司是一个较大的局域网,二层交换机S1放置在一楼,一楼有IT部门和人事部门.二层交换机S2放置在二楼,二楼有市场部和研发部.公司的策略是:不同部门的主机之间不能相互通信,同一部门的主机才可以 ...