一般而言就是把表格内的内容利用ng-repeat，ng-bind，ng-model，ng-value，ng-class等属性将对象绑定到对应的标签，当对象的有相应变化的时候，所绑定的值就会变化。比如
<!-- html --><table>
<tr ng-repeat='user in user_list' ng-class='user.sex'>
<td ng-bind='user.name'><td>
<td ng-bind='user.age'><td>
</tr>
</table> //js 控制器内
$scope.user_list = [
{name:'Tim',age:10,sex:'male'},
{name'Merry',age:11,sex:'female'}
] /*CSS*/
tr.male{
color:blue
}
tr.female{
color:red
}
首先是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>
<br>
<div>
搜索：<input type="text" ng-model="titleFilter" placeholder="输入关键字"> //加上<tr ng-repeat="student in students|filter:titleFilter">实现了表格内容的检索。
</div>
<br>
<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>
<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>
<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>
<td title="'Actions'" width="200">
<a ng-if="!student.$edit" ng-click="student.$edit=true">Edit</a>
<a ng-if="student.$edit" ng-click="student.$edit=false">Save</a>
<a ng-click="deleteStudent(obj)" ng-if="student.$edit" >Delete</a>
<!-- <a ng-click="addStudent()" ng-if="student.$edit" >Add</a> -->
</td>
</tr>
</table>
<div>
<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>
</div>
</body>
</html> 接下来是js代码部分 var myModule=angular.module('myModule',['ngTable']).
controller('FormController',function($scope,ngTableParams,$sce){
$scope.students=[
{Name:'小李',Id:'201401201',Grade:'计算机技术'},
{Name:'李磊',Id:'201401202',Grade:'计算机技术'},
{Name:'夏津',Id:'201401203',Grade:'计算机技术'},
{Name:'杭州',Id:'201401204',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)
}
})
angularjs处理动态菜单的实现方法：
1、核心angularjs代码：
var testImg=angular.module("appTest",["ms.leafMenu"])
.controller('testCtr',['$scope',function($scope){
$scope.data=[{"id":"1","pid":"0","name":"第一行","children":[{"id":"3","pid":"1","name":"第一行1.1"},{"id":"4","pid":"1","name":"第一行1.2"}]},{"id":"2","pid":"0","name":"第二行","children":[{"id":"5","pid":"2","name":"第二行2.1"}]}]
}])
angular.module("ms.leafMenu",[])
.directive('msLeafMenu',['$compile',function($compile){
return {
restrict:'EA',
transclude: true,
replace: false,
//template:"<li></li>",
scope:{
data:'=?',
id:'@?',
pid:'@?',
pvalue:'@?',
showname:'@?',
isstandard:'@?'
},
link:function(scope,element,attrs,leafController){
创建节点数据的方法：
function createTreeData(id,pid,pvalue){
var newData=[]
angular.forEach(scope.data,function(item,index){
if(item[pid]==pvalue){
var children=createTreeData(id,pid,item[id])
if(children &&children.length>0){
item.children=children
}
newData.push(item)
}
})
return newData
}
if(!scope.isstandard){
scope.data=createTreeData(scope.id,scope.pid,scope.pvalue)
}
//向节点增加数据
element.append($compile('<ul class="ms_leaf_menu_group"><li ng-repeat="row in data" ng-class="{ms_parent_item:(row.children &&row.children.length>0),ms_child_item:(!row.children || row.children.length<=0)}"><div ng-click="toogle($index)"><a >{{row[showname]}}</a><span class="glyphicon" ng-class="{\'glyphicon-chevron-right\':(row.children &&row.children.length>0 &&!row.isopen),\'glyphicon-chevron-down\':(row.children &&row.children.length>0 && row.isopen)}" aria-hidden="true"></span></div><div ng-show="row.isopen"><ms-leaf-menu data="row.children" id="id" pid="pid" showname="{{showname}}" pvalue="{{row[id]}}"></ms-leaf-menu></div></li></ul>')(scope))
//此处是关键，调用入口处，需要找到index
scope.toogle=function(index){
scope.data[index]["isopen"]=!scope.data[index]["isopen"]
}
}
}
}])
</script>
2、html代码：
<body ng-app="appTest">
<div ng-controller="testCtr" style=" width:200pxmargin-left:automargin-right:auto">
<ms-leaf-menu data="data" id="id" pid="pid" showname="name" pvalue="0"></ms-leaf-menu>
</div>
</body>
3、效果图
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）