如何利用AngularJS动态创建表格和动态赋值

如何利用AngularJS动态创建表格和动态赋值,第1张

一般而言就是把表格内的内容利用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、效果图


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11735253.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存