angular与datatables 的结合（二）

来源：互联网发布：linux 进程流量编辑：程序博客网时间：2024/06/06 00:39

angular与datatable

html 部分

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <link rel="stylesheet" href="bower_components/datatables/media/css/jquery.dataTables.min.css"></head><body ng-app ="myModule"><div ng-controller="AngularWayChangeDataCtrl as showCase">    <form class="form-inline" ng-submit="showCase.addPerson()">        <table datatable="ng" dt-options="showCase.dtOptions" dt-column-defs="showCase.dtColumnDefs" class="row-border hover">            <thead>            <tr>                <th>                    <div class="form-group">                        <label>                            <input class="form-control" type="number" name="id" ng-model="showCase.person2Add.id" value="">                        </label>                    </div>                </th>                <th>                    <div class="form-group">                        <label>                            <input type="text" class="form-control" name="firstName" ng-model="showCase.person2Add.firstName" value="">                        </label>                    </div>                </th>                <th>                    <div class="form-group">                        <label>                            <input type="text" class="form-control" name="lastName" ng-model="showCase.person2Add.lastName" value="">                        </label>                    </div>                </th>                <th>                    <div class="form-group">                        <button type="submit" class="btn btn-success">新增</button>                    </div>                </th>            </tr>            <tr>                <th>ID</th>                <th>FirstName</th>                <th>LastName</th>                <th></th>            </tr>            </thead>            <tbody>            <tr ng-repeat="person in showCase.persons">                <td>{{ person.id }}</td>                <td>{{ person.firstName }}</td>                <td>{{ person.lastName }}</td>                <td>                    <button type="button" ng-click="showCase.modifyPerson($index)" class="btn btn-warning">修改</button>                    <button type="button" ng-click="showCase.removePerson($index)" class="btn btn-danger">删除</button>                </td>            </tr>            </tbody>        </table>    </form></div><script src="bower_components/jquery/dist/jquery.min.js"></script><script src="bower_components/datatables/media/js/jquery.dataTables.js"></script><script src="bower_components/angular/angular.min.js"></script><script src="bower_components/angular-datatables/dist/angular-datatables.min.js"></script><script src="./app.js"></script></body></html>

angualrjs 部分

var data1 = [{    "id": 860,    "firstName": "Superman",    "lastName": "Yoda"}, {    "id": 870,    "firstName": "Foo",    "lastName": "Whateveryournameis"}, {    "id": 590,    "firstName": "Toto",    "lastName": "Titi"}, {    "id": 803,    "firstName": "Luke",    "lastName": "Kyle"}];angular.module('myModule', ['datatables'])  .controller('AngularWayChangeDataCtrl', function ( DTOptionsBuilder, DTColumnDefBuilder){    var vm = this;    vm.persons = data1;    vm.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers');    vm.dtColumnDefs = [        DTColumnDefBuilder.newColumnDef(0),        DTColumnDefBuilder.newColumnDef(1),        DTColumnDefBuilder.newColumnDef(2),        DTColumnDefBuilder.newColumnDef(3).notSortable()    ];    vm.person2Add = _buildPerson2Add(1);    vm.addPerson = addPerson;    vm.modifyPerson = modifyPerson;    vm.removePerson = removePerson;    function _buildPerson2Add(id) {        return {            id: id,            firstName: 'Foo' + id,            lastName: 'Bar' + id        };    }    function addPerson() {        vm.persons.push(angular.copy(vm.person2Add));        vm.person2Add = _buildPerson2Add(vm.person2Add.id + 1);    }    function modifyPerson(index) {        vm.persons.splice(index, 1, angular.copy(vm.person2Add));        vm.person2Add = _buildPerson2Add(vm.person2Add.id + 1);    }    function removePerson(index) {        vm.persons.splice(index, 1);    }  });

显示效果

总结

这种方法充分应该是完美的，充分利用了angular的模版系统，而且轻度依赖datatable，用来建立应用型web最佳之选。附：参考：[angular-datatables参考资料](http://l-lin.github.io/angular-datatables/)

0 0