一个使用angularjs写的一个模板

本模板中没有提供编辑功能，只有一个搜索和分页的功能

首先引入一些脚本

@section header
{
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/ui-bootstrap-tpls-0.10.0.min.js"></script>
}

 

这里我们使用的是bootstrap3的样式，自己可以去官网下载

接着分析，我们有一个搜索和一个列表、一个分页。一共这三部分组成，你可以将这三部分分别定义在不同的controller中，我这里为了方便，直接定义了二个controller，一个是搜索和列表的，一个是分页的。

<div class="bs-docs-example" ng-app="AppFreeList" >
  @*这个是搜索和列表的controller*@
    <div ng-controller="freelist">
        <div class="row-fluid inboxHeader">
            <div class="span6">
                <input type="text" placeholder="游戏名称" style="width:230px;"  ng-model="querytext" />
                <input type="button" value="搜索" class="btn btn-primary " ng-click="search()"/>
            </div>
        </div>

        <table class="table">
            <thead>
                <tr>
                    <th>应用Id</th>
                    <th>应用名称</th>
                    <th>状态</th>
                    <th>最后更新时间</th>
                    <th>价格</th>
                   
                </tr>
            </thead>
            <tbody>
                <tr class="info" ng-repeat="app in list">
                    <td>
                        <img ng-src="{{app.Logo}}" alt="应用图标" style="width: 32px; height: 32px;">
                    </td>
                    <td>{{app.Title}}</td>
                    <td>{{app.Visibility}}</td>
                    <td>{{app.LastUpdateTime}}</td>
                    <td>{{app.Price}}</td>
                   
                   
                </tr>
            </tbody>
        </table>
    </div>
  @*这个是分页的controller*@
    <div ng-controller="pageController">
        <div>
            <pagination total-items="services.count" page="bigCurrentPage" items-per-page="pageSize" max-size="maxSize" on-select-page="setPage(page)" class="pagination-sm" boundary-links="true"></pagination>
        </div>
    </div>
</div>

接下来开始写我们的脚步，为了方便我这里使用了angular的factory

<script>
//后面有个['ui.bootstrap']这个是angularui的一个插件，主要是用来分页的
    var app = angular.module("AppFreeList", ['ui.bootstrap']);
//接着我们定义了一个服务，服务里面有list（代表列表的数据），count代表总的数量条数，pageindex代表当前的页索引
//serchText代表搜索的内容
    app.factory("MySerices",['$http',function($http) {
        var services = {};
        services.list = [];
        services.count = 0;
        services.pageindex = 0;
        services.searchText = "";
      //此方面表示获取list的数据，使用了一个回调函数，把获取到的数据返回过去，另外services.list是和列表的绑定的，如果
//services.list发生变化，我们希望列表也发生变动，于是就把它的length设为0，然后循环并push到列表中

        services._getList = function(callback) {
            $http.post("GetList", { queryText: services.searchText, pageIndex: services.pageindex }).success(function (data) {
                services.list.length = 0;
                for (var i = 0; i < data.length; i++) {
                    services.list.push(data[i]);
                }
                callback(services.list);
                //services.pageCount();
            });
        };
//获取总的数据条数
        services.pageCount = function () {
            $http.post("GetListCount", { queryText: services.searchText }).success(function (data) {
                services.count = 0;
                services.count = data;

            })
      .error(function () {
          console.error("get item count error.");
      });
        };

        return services;
    }]);
   
    app.controller("freelist", function ($scope, $http, MySerices) {
       
        //调用服务中的一个方法，通过回调函数获得数据，并把services.list对象绑定到$scope.list上面
 MySerices._getList(function(data) {
             $scope.list = data;
         });
//当点击搜索时触发的事件
        $scope.search = function() {
            MySerices.searchText = $scope.querytext;

            MySerices._getList(function (data) {
                $scope.list = data;
            });
            MySerices.pageCount(function (data){});
        };


    });

    app.controller('pageController', function ($scope, $http, MySerices) {
//这段有点意思，由于我们是把Myserices.count绑定到了分页的total-items="services.count"，
//所以我们要自定义一个services。

        $scope.services = MySerices;
        $scope.bigCurrentPage = 1;
        $scope.pageSize = 25,
        $scope.maxSize = 10;
        $scope.setPage = function (pageNo) {
            $scope.bigCurrentPage = pageNo;
            MySerices.pageindex = pageNo-1;
           
            MySerices._getList(function(data) {
                //MySerices.setList(data);
            });
        };
    
        MySerices.pageCount();
    });
</script>

 

总结：如果是数组对象绑定，使用时，要想使得数组变动，数据也跟着变动，就需要我们将数组的长度设为0，并push到数组中。如果是字段对象绑定，使用时，要想使字段的指变动，绑定字段的属性也跟着变动，那么就需要自己定义一个对象，这个对象的引用就是你的服务，然后使用对象（服务）的字段进行绑定