angular初学者福利啦（列表增、删、改）
来源：互联网 发布：花千骨天羽进阶数据 编辑：程序博客网 时间：2024/05/16 08:11
1、废话少说、直接上代码
html页面：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,
user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>angular测试</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="angular/angular.js"></script>
</head>
<body ng-controller="myCtrl">
<button class="add" ng-click="method.add()">添加列表内容</button>
<table>
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>手机号</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="list in lists">
<td ng-bind="list.id"></td>
<td ng-bind="list.name"></td>
<td ng-bind="list.age"></td>
<td ng-bind="list.phoneNum"></td>
<td>
<button ng-click="method.delete(lists,$index)">删除</button>
<button ng-click="method.update(list,$index)">修改</button>
</td>
</tr>
</tbody>
</table>
<!-- 添加、修改弹框 -->
<div class="pop" ng-show="popShow">
<div>
<h2 style="text-align:center;line-height:50px;" ng-bind="popTit"></h2>
<table class="pop-tab">
<tr>
<td>ID:</td>
<td>
<input type="text" ng-model="id"/>
</td>
</tr>
<tr>
<td>name:</td>
<td>
<input type="text" ng-model="name"/>
</td>
</tr>
<tr>
<td>age:</td>
<td>
<input type="text" ng-model="age"/>
</td>
</tr>
<tr>
<td>phoneNum:</td>
<td>
<input type="text" ng-model="phoneNum"/>
</td>
</tr>
<tr>
<td>
<button ng-click="popShow = !popShow">取消</button>
</td>
<td>
<button ng-click="method.sure(lists)">确定</button>
</td>
</tr>
</table>
</div>
</div>
</body>
<script src="js/index.js"></script>
</html>
index.js代码：
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
var test=[
{"id":"1","name":"张三","age":22,"phoneNum":"18298705786"},
{"id":"2","name":"王五","age":28,"phoneNum":"18456705786"},
{"id":"3","name":"张三","age":29,"phoneNum":"18291235786"},
{"id":"4","name":"蔡雄","age":22,"phoneNum":"18298705786"},
{"id":"5","name":"张三","age":26,"phoneNum":"18759705786"},
{"id":"6","name":"张楚","age":22,"phoneNum":"18298705786"}
]
$scope.lists=test;
var sendData={};
$scope.method={
delete:function(data,index){
data.splice(index,1);
},
add:function(){
$scope.popShow = !$scope.popShow;
$scope.popTit="添加";
$scope.id=null;
$scope.name=null;
$scope.age=null;
$scope.phoneNum=null;
},
update:function(list,index){
$scope.popShow = !$scope.popShow;
$scope.popTit="修改";
$scope.id=list.id;
$scope.name=list.name;
$scope.age=list.age;
$scope.phoneNum=list.phoneNum;
//接收修改当前行
$scope.updateList=list;
},
sure:function(data){
sendData.id=$scope.id;
sendData.name=$scope.name;
sendData.age=$scope.age;
sendData.phoneNum=$scope.phoneNum;
if($scope.popTit=="添加"){
//添加
data.push(sendData);
$scope.popShow = !$scope.popShow;
}else{
//修改
$scope.updateList.id=sendData.id;
$scope.updateList.name=sendData.name;
$scope.updateList.age=sendData.age;
$scope.updateList.phoneNum=sendData.phoneNum;
$scope.popShow = !$scope.popShow;
}
}
}
});
- angular初学者福利啦（列表增、删、改）
- angular增，删，改，查
- python -- 列表list的操作（增 删 改）
- 初学者的福利
- 初学者的福利2
- 初学者的福利3
- 初学者的福利4
- 初学者的福利5
- 初学者的福利7
- java 初学者福利
- 列表的增、删、改、查
- react初学者福利来了：react+redux实现一个列表的静态应用
- 多级下拉列表（angular）
- 快速开发各种Android 库列表（开发者）资源福利
- angular 增删改查（全部删，价格段，框排序，+-，小计，总价）
- Angular.js（出库列表页）
- angular增删查改
- Angular增删查改
- 文章标题
- Ibatis如何调用存储过程？
- linux kernel是如何做到释放仅在启动时使用的内存的？
- 修改.srt格式字幕文件
- Java方向软件笔试题
- angular初学者福利啦（列表增、删、改）
- BeetlSQL 实现 ORMapping
- leetcode-java-326. Power of Three
- C++11中的move与forward
- 该如何设置数据连接池的初始大小
- java 基础学习之线程--多线程并发及线程锁
- Hibernate各种主键生成策略与配置详解
- [转]浅谈TCP/IP网络编程中socket的行为
- 关于模运算的性质
