ng-table插件设置排序
作者：MakingChoice
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了AngularJS
ng-table插件设置排序的相关资料,需要的朋友可以参考下
ng-table提供了一个表头来提供，基础的过滤信息：
（1）指定一列的过滤器，然后模板就会使用。
（2）ngTable支持number, text, select 和 select-multiple的值模板。
（3）可以有选择的为NgTableParams提供初始过滤值。
&div class="row"&
&div class="col-md-6" ng-controller="demoController as demo"&
&h3&ngTable directive&/h3&
&table ng-table="demo.tableParams" class="table table-condensed table-bordered table-striped"&
&tr ng-repeat="row in $data"&
&td data-title="'Name'" filter="{name: 'text'}"&{{row.name}}&/td&
&td data-title="'Age'" filter="{age: 'number'}"&{{row.age}}&/td&
&td data-title="'Money'"&{{row.money}}&/td&
&td data-title="'Country'" filter="{ country: 'select'}" filter-data="demo.countries"&{{row.country}}&/td&
&div class="col-md-6" ng-controller="dynamicDemoController as demo"&
&h3&ngTableDynamic directive&/h3&
&table ng-table-dynamic="demo.tableParams with demo.cols" class="table table-condensed table-bordered table-striped"&
&tr ng-repeat="row in $data"&
&td ng-repeat="col in $columns"&{{row[col.field]}}&/td&
(function() {
"use strict";
var app = angular.module("myApp", ["ngTable", "ngTableDemos"]);
app.controller("demoController", demoController);
demoController.$inject = ["NgTableParams", "ngTableSimpleMediumList", "ngTableDemoCountries"];
//注入NgTableParams（ngtablemodule）和ngTableSimpleMediumList、ngTableDemoCountries两个数据源
function demoController(NgTableParams, simpleList, countries) {
this.countries =//初始化selcet的数据源
this.tableParams = new NgTableParams({
// initial filter
filter: { name: "T" } //初始过滤条件
dataset: simpleList
app.controller("dynamicDemoController", dynamicDemoController);
dynamicDemoController.$inject = ["NgTableParams", "ngTableSimpleMediumList", "ngTableDemoCountries"];
function dynamicDemoController(NgTableParams, simpleList, countries) {
this.cols = [//自定义table条目，过滤条件、表头名字和数据源,filterData: countries。
{ field: "name", title: "Name", filter: { name: "text" }, show: true },
{ field: "age", title: "Age", filter: { age: "number" }, show: true },
{ field: "money", title: "Money", show: true },
{ field: "country", title: "Country", filter: { country: "select" }, filterData: countries, show: true }
this.tableParams = new NgTableParams({
// initial filter
filter: { country: "Ecuador" } //初始化数据源
dataset: simpleList
(function() {
"use strict";
angular.module("myApp").run(setRunPhaseDefaults);
setRunPhaseDefaults.$inject = ["ngTableDefaults"];
//通过config来设置表格数量
function setRunPhaseDefaults(ngTableDefaults) {
ngTableDefaults.params.count = 5;
ngTableDefaults.settings.counts = [];
以上就是对AngularJS ng-table插件 的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具Angularjs中表格的增删改查
flower5889
发布时间: 10:14:27
总体的效果图是：
图中的每个按钮都是可以实现其操作的。
（1）首先是html页面的编写：
&!doctype html&
&html ng-app="myModule"& &head&
&meta charset="utf-8"&
&title&学生信息管理&/title&
//需要用到的一些库，要加载的
&script src="bower_components/angular/angular.js"&&/script&
&script src="bower_components/ng-table/dist/ng-table.js"&&/script&
&script src="bower_components/ng-table-export/ng-table-export.js"&&/script&
&link rel="stylesheet" type="text/css"
&link rel="stylesheet" type="text/css"
&link rel="stylesheet" type="text/css"
&script src="module/scripts/controllers/Form.js"&&/script& &/head& &body&
&div ui-view&&/div&
&div ng-controller="FormController"&
&h3&学生信息列表&/h3&
搜索：&input type="text" ng-model="titleFilter" placeholder="输入"& &//加上&tr ng-repeat="student in students|filter:titleFilter"&实现了表格内容的检索。
&table ng-table="tableParams" &
&tr ng-repeat="student in students|filter:titleFilter"& //遍历每一个对象
&td title="'Name'"&
&span ng-if="!student.$edit"&{{student.Name}}&/span&
&div ng-if="student.$edit"&&input
type="text" ng-model="student.Name"&&/div&
&td title="'Id'"&
&span ng-if="!student.$edit"&{{student.Id}}&/span&
&div ng-if="student.$edit"&&input
type="text" ng-model="student.Id"&&/div&
&td title="'Grade'"&
&span ng-if="!student.$edit"&{{student.Grade}}&/span&
&div ng-if="student.$edit"&&input
type="text" ng-model="student.Grade"&&/div&
&td title="'Actions'" width="200"&
ng-if="!student.$edit"
ng-click="student.$edit=true"&Edit&/a&
ng-if="student.$edit"
ng-click="student.$edit=false"&Save&/a&
&a ng-click="deleteStudent(obj)" ng-if="student.$edit"
&Delete&/a&
ng-click="addStudent()" ng-if="student.$edit" &Add&/a& --&
&input type="text" ng-model="newName" placeholder="input Name" required/&
&input type="text" ng-model="newId" placeholder="input Id" required/&
&input type="text" ng-model="newGrade" placeholder="input Grade" required/&
&input type="button" ng-click="addStudent()" value="Add" /&
&/div& &/body&&/html&
（2）JS代码部分：
var myModule=angular.module('myModule',['ngTable']).controller('FormController',function($scope,ngTableParams,$sce){
$scope.students=[
{Name:'小李',Id:'',Grade:'计算机技术'},
{Name:'李磊',Id:'',Grade:'计算机技术'},
{Name:'夏津',Id:'',Grade:'计算机技术'},
{Name:'杭州',Id:'',Grade:'计算机技术'}
]; $scope.addStudent=function(){ & & & //添加学生函数
$scope.students.push({Name:$scope.newName,Id:$scope.newId,Grade:$scope.newGrade});
$scope.newName='';
$scope.newId='';
$scope.newGrade=''; };
$scope.deleteStudent=function(student){ & //删除一行的内容
$scope.students.splice($scope.students.indexOf(student),1);
（3）测试发现上面的方法删除的都是最后一行的内容，接下来改动一点使得可以删除选定行，并且对其加以序列号：
　　deleteStudent（）函数：
　　$scope.deleteStudent=function(index){ & //删除选中的一行$scope.students.splice(index,1);};
在HTML页面中也需要改动一点：&a ng-click="deleteStudent($index)" ng-if="student.$edit"
&Delete&/a&
即在deleteStudent（）中传入当前行的索引index。
具体代码读奉上，希望对您可以有点帮助。
来源:/flower5889/p/4473545.htmlAngularJS开发指南6：AngularJS表单详解_Linux编程_Linux公社-Linux系统门户网站
你好，游客
AngularJS开发指南6：AngularJS表单详解
来源：Linux社区&
作者：chaojidan
表单控件(input, select, textarea )是用来获取用户输入的。表单则是一组有联系的表单控件的集合。
用户能通过表单和表单控件提供验证的服务，知道自己的输入是否合法。这样能让用户交互变得友好，因为用户能通过反馈来修正自己的错误。不过，虽然客户端的验证能够起到很大作用，但也很容易被绕过，所以不能完全依靠客户端验证。 要建立安全的应用，服务器端验证还是必不可少的。
了解AngularJS双向绑定的关键在于了解ngModel指令。这个指令通过动态将model和view互相映射，来实现双向绑定。
为了能美化表单和表单元素，ngModel指令会自动为元素添加以下css类：
ng-invalid
ng-pristine
一个表单就是一个FormController的实例，表单实例可以通过name属性选择性地公开到作用域中。同样的，一个表单控件也是一个NgModelController的实例，表单控件也能同样的被公开到作用域中。这意味视图能通过绑定的基本功能获取表单或者表单控件的状态。
只有当表单发生改变时，重置按钮才会被显示出来。
只有当表单有改变并且改变的值都是合法的，保存按钮才会被显示出来。
能自定义user.email和user.agree的错误信息。
举个例子：
&!doctype html&
&html ng-app&
&script src="http://code.angularjs.org/angular-1.0.2.min.js"&&/script&
function Controller($scope) {
　　　　　　$scope.master= {};
　　　　　　$scope.update = function(user) {
　　　　　　　　$scope.master= angular.copy(user);
　　　　　　};
　　　　　　$scope.reset = function() {
　　　　　　　　$scope.user = angular.copy($scope.master);
　　　　　　};
　　　　　　$scope.isUnchanged = function(user) {
　　　　　　　　return angular.equals(user, $scope.master);
　　　　　　};
　　　　　　$scope.reset();
&div ng-controller="Controller"&
&form name="form" class="css-form" novalidate&
//novalidate是用来屏蔽浏览器本身的验证功能的。
&input type="text" ng-model="user.name" name="uName" required /&&br /&
//required，此输入框必须有内容
&input type="email" ng-model="user.email" name="uEmail" required/&&br /&
&div ng-show="form.uEmail.$dirty && form.uEmail.$invalid"&Invalid:
//此div，如果form表中的name为uEmail的input元素中的内容违法或者是脏数据，那么就显示出来。
&span ng-show="form.uEmail.$error.required"&Tell us your email.&/span&
//如果错误信息是由required引起的，就显示此span
&span ng-show="form.uEmail.$error.email"&This is not a valid email.&/span&
//如果错误信息是由里面的内容不合法引起的，就显示此span
Gender: &input type="radio" ng-model="user.gender" value="male" /&male
&input type="radio" ng-model="user.gender" value="female" /&female&br /&
&input type="checkbox" ng-model="user.agree" name="userAgree" required /&
I agree: &input ng-show="user.agree" type="text" ng-model="user.agreeSign"
required /&&br /&
&div ng-show="!user.agree || !user.agreeSign"&Please agree and sign.&/div&
&button ng-click="reset()" ng-disabled="isUnchanged(user)"&RESET&/button&
&button ng-click="update(user)" ng-disabled="form.$invalid || isUnchanged(user)"&SAVE&/button&
//如果整个form表单没有通过验证或者form表单中的内容没有发生改变，此按钮就不可点击
AngularJS实现了大部分常见的html5表单输入元素(text, number, url, email, radio, checkbox)，也实现了很多用于验证的指令(required, pattern, minlength, maxlength, min, max)。
如果想要定义你自己的验证器的话，可以通过在你自己的指令中添加一个验证函数给ngModel的控制器来实现。要想获得控制器的引用，需要在指令中指定依赖，验证函数可以写在两个地方。
模型到视图的更新中- 只要绑定的模型改变了，NgModelController#$formatters数组中的函数就会被轮流调用，所以每一个函数都有机会对数据进行格式化，当然你也可以通过NgModelController#$setValidity来改变表单的验证状态。
视图到模型的更新中- 相同的，只要用户与表单交互了，NgModelController#$setViewValue就会被调用。 这次是NgModelController#$parsers数组中的函数会被依次调用，每个函数都有机会来改变值或者通过NgModelController#$setValidity来改变表单的验证状态。下面的例子，使用的是这个。
举个例子：
&!doctype html&
&html ng-app="form-example1"&
&script src="http://code.angularjs.org/angular-1.0.2.min.js"&&/script&
　 var app = angular.module('form-example1', []);
　　　　　　var INTEGER_REGEXP = /^\-?\d+$/;
//或者以"-"（负）开头，或者没有负号，后面都是正整数，包括0
　　　　　　app.directive('integer', function() {
　　　　　　　return {
　　　　　　　　require: 'ngModel',
//依赖nogModel指令
　　　　　　　　link: function(scope, elm, attrs, ctrl) {
　　　　　　　　　　ctrl.$parsers.unshift(function(viewValue) {
//ctrl可以调用ngModel指令中controller函数中定义的方法
　　　　　　　　　　　　if (INTEGER_REGEXP.test(viewValue)) {
　　　　　　　　　　　　　　ctrl.$setValidity('integer', true);
　　　　　　　　　　　　　　return viewV
　　　　　　　　　　　　} else {
　　　　　　　　　　　　　　ctrl.$setValidity('integer', false);
　　　　　　　　　　　　　　return
　　　　　　　　　　　　}
　　　　　　　　　　});
　　　　　　　　}
　　　　　　　};
　　　　　　});
　　　　　　var FLOAT_REGEXP = /^\-?\d+((\.|\,)\d+)?$/;
//可以是正负，可以是整数，也可以是浮点数，浮点数可以用"."分开，也可以用","分开。
　　　　　　app.directive('smartFloat', function() {
　　　　　　 return {
　　　　　　　　require: 'ngModel',
　　　　　　　　link: function(scope, elm, attrs, ctrl) {
　　　　　　　　　　ctrl.$parsers.unshift(function(viewValue) {
　　　　　　　　　　　　if (FLOAT_REGEXP.test(viewValue)) {
　　　　　　　　　　　　　　ctrl.$setValidity('float', true);
　　　　　　　　　　　　　　return parseFloat(viewValue.replace(',', '.'));
　　　　　　　　　　　　} else {
　　　　　　　　　　　　　　ctrl.$setValidity('float', false);
　　　　　　　　　　　　　　return
　　　　　　　　　　　　}
　　　　　　　　　　});
　　　　　　　　}
　　　　　　 };
　　　　　　});
&div ng-controller="Controller"&
&form name="form" class="css-form" novalidate&
Size (integer 0 - 10):
&input type="number" ng-model="size" name="size" min="0" max="10" integer /&{{size}}&br /&
//integer，自定义指令
&span ng-show="form.size.$error.integer"&This is not valid integer!&/span&
&span ng-show="form.size.$error.min || form.size.$error.max"&The value must be in range 0 to 10!&/span&
Length (float):
&input type="text" ng-model="length" name="length" smart-float /&{{length}}&br /&
//smart-float，自定义指令
&span ng-show="form.length.$error.float"&This is not a valid float number!&/span&
上面的例子中，我们创建了两个指令。
第一个指令是要验证输入的是否是整数。例如，1.23就不符合验证的值，因为它包含了分数部分。
第二个指令是要验证输入的是否是&智能浮点(smart-float)&。它能把"1.2"或者"1,2"都转化为合法的浮点数"1.2"。注意，这里我们不能使用input元素的type="number"，因为支持HTML5的浏览器不允许用户输入像"1,2"这样的非法值。
AngularJS已经实现了所有基本的HTML表单控件（input,select,textarea），对于大部分情况应该已经够了。但是，你还是可以通过写指令来实现你自己的表单控件。
要和ngModel指令协同工作实现自定义控件，并且实现双向绑定的话，需要：
实现render方法。这个方法负责在数据模型变化时，把变化的值传递给NgModelController#$formatters后，用来在view上渲染新的数据。
在用户与控件交互并且模型需要被更新时，调用$setViewValue方法。这通常是在DOM的监听事件中完成的。
下面的例子演示了如何添加一个&内容可编辑&的数据双向绑定的元素。
&!doctype html&
&html ng-app="form-example2"&
&script src="http://code.angularjs.org/angular-1.0.2.min.js"&&/script&
angular.module('form-example2', []).directive('contenteditable', function() {
//自定义指令contenteditable
　　　　　　return {
　　　　　　　　require: 'ngModel',
　　　　　　　　link: function(scope, elm, attrs, ctrl) {
　　　　　　　　 　　// view -& model
　　　　　　　　　　elm.bind('blur', function() {
//给元素div绑定blur事件
　　　　　　　　　　　scope.$apply(function() {
　　　　　　　　　　　　ctrl.$setViewValue(elm.html());
//当输入结束后，焦点离开div元素时，就更新model
　　　　　　　　
　　　　　　　　　
　　　　　　　　　　// model -& view
　　　　　　　　　　ctrl.$render = function(value) {
　　　　　　　　　　　　elm.html(value);
//更新视图view
　　　　　　　　　　};
　　　　　　　　　　// load init value from DOM
　　　　　　　　　　ctrl.$setViewValue(elm.html());
　　　　　　　　}
　　　　　　};
　　　　});
&div contentEditable="true" ng-model="content" title="Click to edit"&Some&/div&
&pre&model = {{content}}&/pre&
&style type="text/css"&
div[contentEditable] {
background-color: #D0D0D0;
AngularJS权威教程 清晰PDF版&
希望你喜欢，并分享我的工作~带你走近AngularJS系列：
带你走近AngularJS - 基本功能介绍
带你走近AngularJS - 体验指令实例
带你走近AngularJS - 创建自定义指令
如何在 AngularJS 中对控制器进行单元测试
在 AngularJS 应用中通过 JSON 文件来设置状态
AngularJS 之 Factory vs Service vs Provider
AngularJS && 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据
AngularJS 的详细介绍：AngularJS 的下载地址：
本文永久更新链接地址：
相关资讯 & & &
& (01/29/:49)
& (01/29/:17)
& (01/29/:36)
& (01/29/:21)
& (01/29/:34)
& (01/29/:02)
　　　同意评论声明
　　　发表
尊重网上道德，遵守中华人民共和国的各项有关法律法规
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
本站管理人员有权保留或删除其管辖留言中的任意内容
本站有权在网站内转载或引用您的评论
参与本评论即表明您已经阅读并接受上述条款