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></opation>

            <opation ng-selected="true"></opation>

            <opation></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 ;

    }

巴特西

angular 常用写法

最新文章

热门文章