版权声明：所有博客本人原创，转载注明出处即可 https://blog.csdn.net/qq_42813491/article/details/88969427
代码
<!DOCTYPE html>
<html lang="en" ng-app="app"><!-- 引入控制程序 -->
<head>
<meta charset="UTF-8">
<title>对象数据绑定</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<!-- 实例化控制器，格式：类名-as-实例名 -->
<div ng-controller="MainCtrl as mainCtrl" ng-style="mainCtrl.render();">
<h2>对象数据绑定</h2>
<center>
<table border="2px" ng-style="mainCtrl.render_table();">
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr ng-repeat="item in mainCtrl.stuList">
<td>{{item.sid}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td>
<a ng-style="mainCtrl.render_a();" href="javascript:;" ng-click="mainCtrl.del(item.sid);">删除</a>
</td>
</tr>
</table>
<form >
<p><input type="search" ng-model="mainCtrl.stuObj.sid" placeholder="学号"></p>
<p><input type="search" ng-model="mainCtrl.stuObj.name" placeholder="姓名"></p>
<p><input type="search" ng-model="mainCtrl.stuObj.age" placeholder="年龄"></p>
<p>
男：<input type="radio" name="sex" value="男" ng-model="mainCtrl.stuObj.sex">
女：<input type="radio" name="sex" value="女" ng-model="mainCtrl.stuObj.sex">
</p>
<p>
<button ng-click="mainCtrl.add()">添加</button>
</p>
</form>
</center>
{{mainCtrl.stuObj}}
</div>
<script>
var app=angular.module("app",[])//定义控制程序，用ng-app指令引用
app.controller("MainCtrl",[function(){//定义控制器，用ng-controller指令引用
//定义一个空的学生对象，和表单添加的数据项双向绑定
this.stuObj={};
//学生数组，模拟数据库
this.stuList=[
{"sid" : 1 , "name" : "冷月心" , "age" : 20, "sex" : "男"},
{"sid" : 2 , "name" : "莫山山" , "age" : 21 , "sex" : "女"},
{"sid" : 3 , "name" : "叶红鱼" , "age" : 22 , "sex" : "女"}
]
//定义函数render
this.render=function(){
return {
"background-color":"#2c3e50",
"width":"500px",
"margin":"100px auto",
"text-align":"center",
"color":"white",
"padding-top":"5px",
};
}
//定义函数render_table
this.render_table=function(){
return {
"width":"300px",
"border-collapse":"collapse",
"text-align":"center",
"background-color":"skyblue"
};
}
//定义函数render_a
this.render_a=function(){
return {
"text-decoration":"none",
"color":"#fff"
};
}
//定义函数add,添加学生
this.add=function(){
this.stuList.push(this.stuObj);
this.stuObj={};//重置学生对象，让数据重新绑定
alert('添加成功');
}
//定义函数del,删除学生
//用到的splice 参考文档 http://www.w3school.com.cn/jsref/jsref_splice.asp
this.del=function(sid){
for(var k in this.stuList){
if(sid==this.stuList[k].sid){
this.stuList.splice(k,1);
}
}
}
}])
</script>
</body>
</html>
添加效果图
新指令
ng-repeat
用来遍历集合或数组 ，格式 遍历项 in 目标集合或数组