AngularJS , 分页 , 更新复选框

1. AngularJS 框架

(1) AngularJS 四大特征

1 MVC 模式 (使代码分离)
    1) Model:数据,其实就是 angular 变量($scope.XX);
    2) View: 数据的呈现,Html+Directive(指令);
    3) Controller:操作数据,就是 function,数据的增删改查;
2 双向绑定
3 依赖注入
4 模块化设计
    高内聚低耦合法则
        1) 官方提供的模块 ng、ngRoute、ngAnimate
        2) 用户自定义的模块 angular.module('模块名',[ ])

(2) AngularJS 语法

1 插值表达式 {{ }} 
    如 1: {{name}} 如 2: 三元运算 color="{{$index==0?'red ':''}}"

2 数据绑定 
    ng-model=”” 

3 模块 
    ng-app=”” var app = angular.module('pyg',[‘pagination’]); 

4 控制器 
    ng-controller=”” app.controller('helloController',function($scope){ .. }); 

5 初始化 
    ng-init=”” 

6 点击事件 
    ng-click=”” 

7 循环 
    ng-repeat=”x in list” 

8 内置服务( url --> 访问的地址 )
    1) $http.get('url').success(function(response){ ... });
    2) $http.post('url',data).success(function(response){ ... }); 

9 控制器继承
    1) $controller( "baseController",{ $scope:$scope}); 

10 复选框(checkBox)  
    ng-model=”” ng-true-value=”0” ng-false-value=”1”
    <input  type="checkbox"  ng-model="pojo.status"  ng-true-value="1"  ng-false-value="0" >  

11 下拉框(select)  
    ng-model=”” ng-repeat=”cat.id as cat.name for list”
    < td>
        <select  ng-model= "entity.goods.category1Id" ng-options="cat.id as cat.name for cat in itemCat1List" class= "form-control"></ select>
    </td>

2. 分页

2.1 js 代码

//分页控件配置
$scope.paginationConf = {
    currentPage: 1,
    totalItems: 10, // 总条数
    itemsPerPage: 10, // 每页显示条数
    perPageOptions: [1, 5, 10, 20, 30, 40, 50],
    onChange: function () {
        $scope.reloadList();
    }
};

//定义分页查询代码
//定义 reloadList 重新加载页面
$scope.reloadList = n function () {
    $scope.search($scope. paginationConf. currentPage, $scope. paginationConf. itemsPerPage);
};

$scope.y searchEntity = {}; //定义搜索对象

//搜索 + 分页
$scope.search = n function (curPage, pageSize) {
    goodsService.search(curPage, pageSize, $scope. searchEntity).success(function (response) {
        $scope.t list = response. list;
        $scope. paginationConf.s totalItems = response.total; //更新总记录数
    });
};

2.2 html 页面

<!-- 导入分页插件 -->
<n tm-pagination  conf= "paginationConf"></ tm-pagination>

3. 更新复选框(CheckBox)

1 Js 代码

/**
* 更新复选框(CheckBox)的选中数据
*/
$scope.s selectIds = [];
$scope.getChecked =  function($event,id){
    if ($event. target. checked){
        $scope. selectIds.push(id);
    }else {
        $scope. selectIds.splice($scope. selectIds.indexOf(id),1);
    }
};