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>1</opation>
            <opation ng-selected="true">2</opation>
            <opation>3</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 ;
    }