您的位置：首页 > Web前端 > JavaScript

AnjularJS的用户信息添加和删除

2018-03-26 13:54 225 查看

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = angular.module("myapp",[]);
app.controller("mycontrl",function ($scope) {
//声明一个变量---记录表单显示/隐藏
$scope.flag = false;
//初始化一个数组
$scope.users=[{name:"张三",age:25},{name:"李四",age:28},{name:"王五",age:20}];
//添加数据的函数
$scope.add=function () {
//获取到输入的用户名和年龄
var name_value = $scope.name;
var age_value = $scope.age;
//添加到数组中
$scope.users.push({name:name_value,age:age_value});
}
//删除指定的数据
$scope.del=function (index) {
$scope.users.splice(index,1);
}
});
</script>
</head>

<body ng-app="myapp" ng-controller="mycontrl">
<table border="1px" cellspacing="0" cellpadding="0" width="50%">
<tr>
<td colspan="3"><button ng-click="flag=true">添加</button></td>
</tr>
<tr ng-repeat="s in users">
<td>{{s.name}}</td>
<td>{{s.age}}</td>
<td><button ng-click="del($index)">删除</button></td>
</tr>
</table>
<hr />
<form ng-show="flag">
用户名:<input type="text" ng-model="name"/>
年龄:<input type="text" ng-model="age" />
<button ng-click="add()">保存</button>
</form>
</body>

</html>
4000

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航