所以在能使用ng-if的情况,用它代替所有的ng-show和ng-hide吧.

(7) 关于ng-bind-html

通常情况下为html元素绑定数据,有ng-bind就够了,但一些情境下需要绑定的不是一般的数据,而是html.那么ng-bind就不够用了,需要使用ng-bind-html,它会将内容作为html格式输出.比如想输出带有class的html,那么就使用ng-bind-html,而且还需要ngSanitize的配合,需要引入相应的文件.

(8) 获取ng-repeat数据filter后的结果

这个一般在搜索的时候需要用到,比如多重ng-repeat数据形成列表.然后filter一个字段,现在要得到filter之后的结果,有2中方式.

一种是在html的ng-repeat中类似这么写:

ng-repeat="food in foodCategory._displayfoods = (foodCategory.foods | filter: { 'name': searchobj.foodfilter } | orderBy: food.sort_order)"

这样_displayfoods就是filter后的最终显示的结果.另一种方式是通过两套数据,一套写在controller中,然后filter以及orderBy都是在controller中操作,最后操作的结果在用来ng-repeat.

第一种方式比较方便,第二种方式更好,性能也好.

(9) ng-class以及ng-style通过判断赋值

根据变量的值决定是否应用某种class,以及不同的style样式.

ng-class="{'state-error':!foodForm.foodstock.$valid}"

ng-style="{ color: i.color=='' || i.name=='活' 'default' : '#fff' }"

(10) form校验以input为例

angular的form可以通过input的HTML5属性进行校验,这里主要通过form以及input的name属性进行锁定,formname.inputname.$valid表示name为inputname的空间是否通过本身的属性校验.

(11) $resource和$http的$promise

$q.all([
resource.query().$promise,
resource2.query().$promise
]).then(functon(success){
console.log(success);
},functon(error){
console.log(error);
});

foodFactory.food.save(f).$promise.then(function(result){
foodFactory.food.get({id:result.id}).$promise.then(function(data){
});
});

这个不解释了,直接看就可以了,注意$http的promise需要手动返回,所以一般情况下都通过$resource.

(12) 仅$watch监听collection中的一个属性

$watch的第三个参数设置为true,即可deep watch.不过有时候其实不想或者不需要监听collection的全部属性.只要监视其中的一个或者几个,这时候通过for循环虽然可以循环$watch不过明显太挫.

通过下面这种写法就可以监控一个collection的单独一个object属性.

$scope.people = [
{
"groupname": "g1",
"persions": [
{
"id": 1,
"name": "bill"
},
{
"id": 2,
"name": "bill2"
}
]
},
{
"groupname": "g2",
"persions": [
{
"id": 3,
"name": "bill3"
},
{
"id": 4,
"name": "bill4"
}
]
}
]

$scope.$watch(function($scope) {
return $scope.people.map(function(obj) {
return obj.persions.map(function(g){
return g.name
});
});
}, function (newVal) {
$scope.count++;
$scope.msg = 'person name was changed'+ $scope.count;
}, true);

(13) debounce防抖处理

这个对于频繁出发的处理非常有用,适用于类似ng-change,$watch的一些场景.比如根绝关键字即时搜索的场合,将$debounce封装为服务,直接调用接口,代码:http://jsfiddle.net/Warspawn/6K7Kd/

(14) 快速定位到某个位置

一般来讲页面内通过这样的形式就可以结合js代码,实现快速定位.在angular中也是通过类似的原理实现,代码如下:

var old = $location.hash();
$location.hash('batchmenu-bottom');
$anchorScroll();
$location.hash(old);

这样写是因为直接location.hash会导致url变化,页面跳转,所以加了防止跳转的代码.

暂时就总结了这么多,很多东西都是查资料以及自己实践的,希望对需要的TX会有所帮助。

希望你喜欢，并分享我的工作~带你走近AngularJS系列：