1.3.md

1.3 题目列表

Ojsite网站中主要有三个题目列表，第一处是题库列表，第二处是分类题库列表，第三处是后台管理题目列表。题库列表中展示所有的题目，分页显示。分类题库列表通过url传参在题库首页展示分类题库，第三处的后台管理题目列表是又angularjs生成。后端将纯json数据传送给前端，由angularjs生成页面，通过directive函数注册系列的删除按钮和接受按钮。controller函数中逻辑和数据处理从而生成界面。

tpApp.directive("delete",function($document,$http){
  return{
    restrict:'A',
    require: 'ngModel',
    link:function(scope, element, attrs,ngModel){
      element.bind("click",function(){
        var id = ngModel.$modelValue.id;
        scope.$apply(function(){
          for(var i=0; i<scope.data.list.length; i++){
            if(scope.data.list[i].id==id){
            	if (!window.confirm("Sure to Delete?")) {
            		return;
            	}
            	scope.data.list.splice(i,1);
                $http.get("/api/problem/delete/"+id, {
					params: {"id":id}
				}).success(function(data){
					if (data.result) {
						console.log("delete success.");
					} else{
						console.log("delete failed.", data.debug)
					};
				});
            }
          }
        })
      })
    }
  }
});

上列中便是注册删除事件。而下面便是通过controller从远程服务器获取json数据并渲染出界面。

tpApp.controller("ProblemListCtrl", function($scope,$http,Data) {
	var current_page = 1;
	$scope.data = Data;
	$scope.data.has_next = false;
	this.get_page = function (page) {
		$http.get("/api/problem/list/"+page, {
			params: {"page":page}
		}).success(function(data){
			$scope.data = data;
		});
	}
	this.get_page(current_page);
    $scope.prevPage = function() { 
		get_page(current_page--)
		console.log("ng clicked prevPage:",current_page)
	};
	$scope.nextPage = function() {
		get_page(current_page++)
		console.log("ng clicked nextPage:",current_page)
	};
	$scope.prevPageDisabled = function() {
		return current_page === 1 ? "disabled" : "";
	};
	$scope.nextPageDisabled = function() {
		return !$scope.data.has_next ? "disabled" : "";
	}
});

并且这种生成的列表中还有分页功能，获取页面数据的api路径是/api/problem/list/{page}，最后的page便是页码参数。通过不同的参数可以获取不同的分页页面。