0、关于Ng-app

    通过ngApp指令来引导Angularjs应用是一种简洁的方式 ,适合大多数情况。在高级开发中,例如使用脚本装载应用,您也可以使用Bootstrap手动引导AngularJs应用。

1、ngModel实现Select

具体参见 AngularJs实现无限级下拉Select。

2、在$ scope域外调用$ scope的方法

element = document.querySelector('[ng-controller=help_controller]');

var $scope = angular.element(element).scope();

......

$scope.$apply();

3、Controller尽量不要取相同的名字;

4、ng-repeat有重复值的解决办法

当你传入下面这个数组到Ng-repeat中去的时候就会报错,因为有重复数据,怎么办呢,看下面:

$scope.items = ['red','grey','grey'];

上面的grey明显是数组中重复的数据,传入下面Html中:

<li ng-repeat="item in items" ng-bind="item"></li>

就会报错:

Error: [ngRepeat:dupes]

http://errors.angularjs.org/1.2.28/ngRepeat/dupes?p0=itemNaNn%items&p1=string%3Agrey&p2

=%22grey%22

说你的数据有重复的,解决方案如下:

<li ng-repeat="item in items track by $index" ng-bind="item"></li>

5、ng-Class的使用

第一种:

<span ng-class="{'glyphicon glyphicon-plus': impress.plus, 'glyphicon glyphiconminus':

impress.minus}" ng-click="swiftTitle(impress)" ></span>

你可以通过ng-click方法来改变impress对象中对应的属性的True或者false,为True的时候就显示对应的

Class。

第二种:

<div ng-class="{true: 'label-item-content container-fluid label-group-skin', false:

'label-item-content container-fluid'}[iseditor]" ng-show="impress.isshow">

当iseditor的值为True时显示第一个,否则显示第二个。

6、Angular中使用a标签

当你像这样

<a href="javascript:void;"></a>

就会报语法错误,最好写成

<a href="javascript:;"></a>

7、angular.forEach

angular自带的遍历方法,在一种特殊的情况下,会出现少遍历的情况,如下:

angular.forEach($scope.deleteSelected,function(value,key){

var len = $scope.myInitLabel.length;

for(var i=0;i<len;i++){

if(value.id === $scope.myInitLabel[i].id){

$scope.myInitLabel.splice(i,1);

}

}

})

上面代码中,如果执行删除原集合中的选项,在For循环中的Len长度并没有随着你删除选项执行而

改变(事实上,你删除了一个,原先在第二位的移到第一位,这个时候再想删除原先第二个就不行

,因为他实际上已经到第一位去了。)

解决方案:

angular.forEach($scope.deleteSelected,function(value,key){

for(var i=0;i<$scope.myInitLabel.length;i++){

if(value.id === $scope.myInitLabel[i].id){

$scope.myInitLabel.splice(i,1);

}

}

})

就是把集合写在循环中,实时更新集合长度。

8、ng-hide/ng-show

ng-hide/ng-show是控制显示隐藏的,但是有一个情况是:当你显示A的时候,不想显示B;显示B的时

候不想显示A;

<div class="label-search-common ">
    <div class="btn btn-default" ng-click="changeMainWindow()" ng-hide="deleteMask" ngshow="
    ismainwindow">
        <span class="glyphicon glyphicon-plus"></span> <span></span>
    </div>
    <div class="btn btn-default" ng-hide="ismainwindow" ng-click="changeMainWindow()">
        <span class=""></span>
    </div>
</div>
<div class="label-search-common ">
    <div class="btn btn-default" ng-hide="deleteMask" ng-show="ismainwindow"

ng-click="showDeleteMask()">
        <span class=" glyphicon glyphicon-minus"></span> <span></span>
    </div>
    <div class="btn btn-default" ng-show="deleteMask" ng-click="deleteLabel();">
        <span class=""></span>
    </div>
    <div class="btn btn-default" ng-show="deleteMask" ng-click="showDeleteMask();">
        <span class=""></span>
    </div>
</div>

上面这两个Div就是这种情况,我省略了它们关联的Div,这样,在切换deleteMask或者

ismainwindow的时候不会影响到他们内部的Div的显示与隐藏

9、只取一次数据函数

$scope.changeSelect1 = function(info){

$scope.selectInfo2 = [];

if(typeof $scope.initSelectInfo2 != "object"){

labelCommonServices.test2Service({},function(response){

$scope.initSelectInfo2 = response;

angular.forEach(response,function(value,key){

if(info&&info.code&&(value.forcode == info.code))

$scope.selectInfo2.push(value);

})

},function(response,status){ console.log("dd")});

}else{

angular.forEach($scope.initSelectInfo2,function(value,key){

if(info&&info.code&&(value.forcode == info.code))

$scope.selectInfo2.push(value);

})

}

}

10、想要取消让checkbox清零,遍历数组把Current设置为False就行

<input type="checkbox" name="{{fi.field}}" value="{{fi.field}}" ng-model="fi.current">

<span ng-bind="fi.describe" class="common-extract-table-span"></span>

11、路由项目默认进入根目录中的Index.html


12、指令的 scope中的变量不能有大写,controller一般都是用来放公用方法,link是用来做dom绑定操作的

13.关于路由

针对老式浏览器可以使用标签模式,针对现代浏览器可以使用HTML5模式。

前者在URL中使用#来防止页面刷新,同时形成浏览器历史记录。具体形式如下

http://yoursite.com/#!/inbox/all

AngularJS支持的另外一种路由模式是 html5 模式。在这个模式中,URL看起来和普通的URL

一样(在老式浏览器中看起来还是使用标签的URL)。例如,同样的路由在HTML5模式中看起来

是这样的:

http://yoursite.com/inbox/all

在AngularJS内部, $location 服务通过HTML5历史API让应用能够使用普通的URL路径来

路由。当浏览器不支持HTML5历史API时, $location 服务会自动使用标签模式的URL作为替代

方案。

两者之间的切换通过$locationProvider.html5Mode进行切换。

14.Radio的最佳实践

<div class="row-right">
    <input id="man" class="hideinput" ng-checked="myForm.sex == 1" type="radio" ng-model="myForm.sex" name="sex" value="1" />
    <span class="radio-span man" ng-class="{'active':myForm.sex == 1}" ng-click="selectRadio('man')">男</span>
    <input id="women" class="hideinput" ng-checked="myForm.sex == 2" type="radio" ng-model="myForm.sex" name="sex" value="2" />
    <span class="radio-span women" ng-class="{'active':myForm.sex == 2}" ng-click="selectRadio('women')">女</span>
</div>
$scope.selectRadio = function (type) {
            if (type == 'man') {
                $scope.myForm.sex = 1;
            } else {
                $scope.myForm.sex = 2;
            }
            /*  $('.row-right .radio-span').removeClass('active') && $('.row-right .'+type).addClass('active');
              $('.row-right input[type="radio"]').removeAttr('checked') && $('#' + type).attr('checked', 'checked');*/
        }

15.ngmodel写法注意

ngModel必须有 [  .  ]避免原型链继承的坑;即不能直接赋值为$scope上的基本类型;需包含一个点,即“userinfo.name”;

 16. angularjs ng-cloak避免Dom加载时闪烁

 17. ng-if 不能用来控制Dom的显示与隐藏,应该用Ng-show、ng-hide来控制。因为ng-if的显示与隐藏是删除与新建Dom节点,而Ng-show与ng-hide则是控制样式来显示与隐藏。

18、动态配置路由

  A .

$stateProvider.state('contacts', {
  url:'/contacts/:id'
  templateUrl: function (stateParams){
    return '/partials/contacts.' + stateParams + '.html';
  }
})

B.

用Ajax请求后台的路由信息,用Angular.forEach遍历组装。注意要同步Ajax,并且遍历所有的路由,不能写一部分传一部分。

结构-行为-样式-angularJs笔记的更多相关文章

  1. 结构-行为-样式 - Angularjs 环境下Ztree结合JqueryUI实现拖拽

    新的项目中有一个需求是要求客户标签可以自定义,于是就想到了客户体验,让客户自己拖拽标签进行组合查询.但是理想很丰满,现实很骨感.一开始就遇到了问题,各个插件之间的结合问题,折腾一翻之后终于实现了这个功 ...

  2. 结构-行为-样式-Css笔记

     0.常见的行级元素和块级元素: 行级元素:div,table,form ,ul,ol,p,h1-h6,hr; 块级元素:a,select,input,textarea,img,label,br,i, ...

  3. 结构-行为-样式-angularJs 指令实现滚动文字

    最近在做XX项目的大屏展示页面,有一个表格需要用到这个滚动效果,于是就写了个指令,记录下,共同学习. Html代码: <td word-roll tword="item"&g ...

  4. 结构-行为-样式-angularJs 指令解决IE下无PlaceHolder的问题

    最近项目开发的时候遇到一个头疼的问题,在测试IE兼容性的时候,发现placeholder在IE下无效.查网上说也是有各种解决方案,但是都不是我想要的,于是决定自己写一个.思路:placeHolder是 ...

  5. 结构-行为-样式-PS笔记

    1.矩形选框,按住Shift就可以成为正圆或者正方形.按住ALt就可以控制圆心的位置: 2.美颜:滤镜--模糊--回到开始--历史记录工具,去掉不要的地方. 3.套索工具双击闭合:4.钢笔工具是做选区 ...

  6. 结构-行为-样式-Javascript笔记

    一.console.dir()可以显示一个对象所有的属性和方法. 二.递归遍历一个数据集合: A.数据: {  "menu": [    {      "menuId&q ...

  7. 结构-行为-样式-Bootstrap笔记

    1.自上而下的内容布局,中间内容可变,应该用: <div class=" container-fluid"> <div class=" row" ...

  8. 结构-行为-样式-angularJs ngAnimate(Js实现)

    声明 页面 Js 注意事项 官方链接 一.声明 注意animate的版本要与Angular的一致. <script src="jquery.1.9.1.min.js"> ...

  9. 006-循环结构(下)-C语言笔记

    006-循环结构(下)-C语言笔记 学习目标 1.[掌握]do-while循环结构 2.[掌握]for循环结构 3.[掌握]嵌套循环 一.do-while循环结构 do-while语法:   1 2 ...

随机推荐

  1. T-SQL:毕业生出门需知系列(二)

    第2课 检索数据 2.1 SELECT 语句 用途:从一个或多个表中检索数据信息 关键字:作为SQL组成部分的保留字.关键字不能用作表或列的名字. 为了使用SELECT检索表数据,必须至少给出两条信息 ...

  2. Swift: 在Swift中桥接OC文件(自己创建的类文件、第三方库文件)

    一.介绍 随着Swift的逐渐成熟,使用swift开发或者混合开发已经成为了一个趋势,本身苹果公司也十分推荐使用Swift这门新语言.目前Swift已经更新到了3.0,估计没有多久4.0就要出来了.那 ...

  3. The Pragmatic Programmer Quick Reference Guide

    1.关心你的技艺 Care About Your Craft 如果不在乎能否漂亮地开发出软件,你又为何要耗费生命去开发软件呢? 2.思考!你的工作 Think! About Your Work 关掉自 ...

  4. python中的正则表达式(re模块)

    一.简介 正则表达式本身是一种小型的.高度专业化的编程语言,而在python中,通过内嵌集成re模块,程序媛们可以直接调用来实现正则匹配.正则表达式模式被编译成一系列的字节码,然后由用C编写的匹配引擎 ...

  5. 161103、Spring Boot 入门

    Spring Boot 入门 spring Boot是Spring社区较新的一个项目.该项目的目的是帮助开发者更容易的创建基于Spring的应用程序和服务,让更多人的人更快的对Spring进行入门体验 ...

  6. 将web项目deploy到tomcat的方法

    如果已经把整个项目发布到tomcat的webapps文件夹下,就不用再配置tomcat的server.xml了(也就是不用配置<Context>节点) 并且,你的项目的WEB-INF/li ...

  7. 数值积分NIntegrate中的具体算法

    数值积分方法很多,Mathematica中至提供了NIntegrate.具体算法可参照官方帮助. http://reference.wolfram.com/language/tutorial/NInt ...

  8. Effective C++ 笔记三 资源管理

    条款13:以对象管理资源 许多资源被动态分配于heap内而后被用于单一区块或函数内.它们应该在控制流离开那个区块或函数时被释放.标准程序库提供的auto_ptr正是针对这种形式而设计的特制产品.aut ...

  9. 【Web探索之旅】第一部分:什么是Web?

    内容简介 1.Web探索之旅:开宗明义 2.第一部分第一课:什么是Web? 3.第一部分第二课:Web,服务和云 4.第一部分第三课:Web的诞生史 Web探索之旅:开宗明义 大家好. 我们这个系列课 ...

  10. 在React中使用CSS Modules设置样式

    最近,一直在看React...那真的是一个一直在学的过程啊,从配置环境webpack,到基础知识jsx,babel,es6,没有一个不是之前没有接触的.其实,我内心是兴奋的啊,毕竟,活着就是要接触一些 ...