AngularJS(基本使用)动态添加表格数据(增删改查)
2017-12-08 19:47
627 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
水果:<input type="text" ng-model="name" />
<input type="button" value="添加" ng-click="add()" />
<input type="button" value="批量删除" ng-click="plsc()" />
<table border="1px" cellspacing="0px" cellpadding="0px" width="200px" height="30px">
<tr>
<td><input type="checkbox" ng-click="qx()"/></td>
<td>水果名称</td>
<td>操作</td>
</tr>
<tr ng-repeat="g in goods">
<td><input type="checkbox" name="ck" ng-click="ck($index)"</td>
<td>{{g.name}}</td>
<td><input type="button" ng-click="dele($index)" value="删除"/></td>
</tr>
</table>
<script type="text/javascript">
var mb = angular.module("myApp",[]);//创建模板
mb.controller("myCtrl",function($scope){//创建控制
//定义数组
$scope.goods=[];
//添加的方法
$scope.add = function(){
//创建对象
var go = {"flag":false,"name":$scope.name}
//放进数组
$scope.goods.push(go);
}
//删除一行
$scope.dele =function($index){
$scope.goods.splice($index,1);
}
//改变每行chekbox的状态
$scope.ck = function($index){
$scope.goods[$index].flag=!$scope.goods[$index].flag
}
//批量删除
$scope.plsc = function(){
//反着遍历
for (var i = $scope.goods.length-1;i>=0;i--) {
if ($scope.goods[i].flag) {
$scope.goods.splice(i,1);
}
}
}
//全选
var qq = true;
$scope.qx = function(){
//获取属性
var ck = $("input[name=ck]")
for (var i=0;i<ck.length;i++) {
ck[i].checked=qq;
//给每个数组中的ck赋值
$scope.goods[i].flag=qq;
}
qq=!qq;
}
});
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
水果:<input type="text" ng-model="name" />
<input type="button" value="添加" ng-click="add()" />
<input type="button" value="批量删除" ng-click="plsc()" />
<table border="1px" cellspacing="0px" cellpadding="0px" width="200px" height="30px">
<tr>
<td><input type="checkbox" ng-click="qx()"/></td>
<td>水果名称</td>
<td>操作</td>
</tr>
<tr ng-repeat="g in goods">
<td><input type="checkbox" name="ck" ng-click="ck($index)"</td>
<td>{{g.name}}</td>
<td><input type="button" ng-click="dele($index)" value="删除"/></td>
</tr>
</table>
<script type="text/javascript">
var mb = angular.module("myApp",[]);//创建模板
mb.controller("myCtrl",function($scope){//创建控制
//定义数组
$scope.goods=[];
//添加的方法
$scope.add = function(){
//创建对象
var go = {"flag":false,"name":$scope.name}
//放进数组
$scope.goods.push(go);
}
//删除一行
$scope.dele =function($index){
$scope.goods.splice($index,1);
}
//改变每行chekbox的状态
$scope.ck = function($index){
$scope.goods[$index].flag=!$scope.goods[$index].flag
}
//批量删除
$scope.plsc = function(){
//反着遍历
for (var i = $scope.goods.length-1;i>=0;i--) {
if ($scope.goods[i].flag) {
$scope.goods.splice(i,1);
}
}
}
//全选
var qq = true;
$scope.qx = function(){
//获取属性
var ck = $("input[name=ck]")
for (var i=0;i<ck.length;i++) {
ck[i].checked=qq;
//给每个数组中的ck赋值
$scope.goods[i].flag=qq;
}
qq=!qq;
}
});
</script>
</body>
</html>
相关文章推荐
- js动态添加表格数据使用insertRow和insertCell实现
- js动态添加表格数据使用insertRow和insertCell实现
- 使用jQuery动态创建一个表格(根据用户输入的内容添加一行数据,并且能逐行删除)
- 使用jQuery动态创建一个表格,根据用户数输入的内容添加一行数据
- listview动态添加数据,使用sqlite对本地数据库增删改查
- Android中使用列表画表格(可动态添加行数据)
- (angularjs) 数据的增删改查(添加用户,查询年龄,批量删除,全部删除,修改密码) 类似题
- 通过angularjs添加表格数据实现增删总金额
- 使用jQuery动态创建一个表格,根据用户数输入的内容添加一行数据
- js 动态表格 可以实现增删改查数据
- 可编辑的table. 添加数据,修改数据。稍加修改就可以部署到ajax 动态表格中
- 使用JavaScript动态添加、 删除表格
- javascript动态添加删除表格数据管理
- C#中使用ListView动态添加数据不闪烁
- 在Web.Config文件中使用configSource,避免动态修改web.config导致asp.net重启(另添加一个Config文件用于管理用户数据)
- javascript动态添加删除表格数据管理
- 动态sql语句基本语法(字段名,表名,数据库名之类作为变量时,必须用动态SQL如ALTER TABLE中使用程序传递的参数)
- 使用jquery和json动态添加表格
- [原创]JavaScript动态添加表格行(使用模板、标记)
- JavaScript 动态添加表格行 使用模板、标记