angular js 循环数据(死数据) 添加数据 隔行换色 单个删除 排序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第三周周考技能</title>
<script type="text/javascript" src="../jQuery-2.1.0/jquery-2.1.0.js" ></script>
<script type="text/javascript" src="../angular.js" ></script>
<style>
/*偶数行*/
tbody tr:nth-child(even){
background-color: #cde6c7;
}
/*奇数行*/
tbody tr:nth-child(odd){
background-color: #cd9a5b;
}
</style>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
var date1 = new Date("2017-11-20 09:32:21");
var date2 = new Date("2017-11-20 10:32:21");
var date3 = new Date("2017-11-20 11:11:11");
$scope.user = [{
name : "云南白药",
num : 100,
cd : "云南",
price : 19.9,
date : date1
},{
name : "999感冒灵",
num : 30,
cd : "北京",
price : 12.5,
date : date2
},{
name : "感康",
num : 20,
cd : "河北",
price : 16.6,
date : date3
}];
//删除
$scope.del = function(delName){
for (index in $scope.user) {
if(delName == $scope.user[index].name){
$scope.user.splice(index,1);
}
}
};
//下拉菜单排序
$scope.px = "";
//入库按钮操作
$scope.addShow = false;
$scope.isIf = function(){
if ($scope.addShow ) {
$scope.addShow = false;
} else{
$scope.addShow = true;
}
}
//添加商品
$scope.newName = "";
$scope.newNum = "";
$scope.newCd = "";
$scope.newPrice = "";
$scope.addNew = function(){
var t = {
name : $scope.newName,
num : parseInt($scope.newNum),
cd : $scope.newCd,
price : $scope.newPrice,
date : new Date()
};
$scope.user.push(t);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>商品库存管理系统</h3>
<br /><br />
<input type="text" placeholder="输入关键字搜素..." ng-model="search" />
<select ng-model="px">
<option value="">------排列 方式------</option>
<option value="num">按货物数量正序排列</option>
<option value="-num">按货物数量逆序排列</option>
<option value="date">按入库时间正序排列</option>
<option value="-date">按入库时间逆序排列</option>
</select>
<button style="background-color: #E6B500;" ng-click="isIf()">入库</button>
<br /><br />
<table border="1px solid blue" cellpadding="10" cellspacing="0">
<tr align="center" style="background-color: #8E8E8E;">
<th>货物名称</th>
<th>货物数量</th>
<th>货物产地</th>
<th>货物单价</th>
<th>货物入库日期</th>
<th>操作</th>
</tr>
<tbody>
<tr ng-repeat="sp in user | filter:{'name':search} | orderBy : px " >
<td>{{sp.name}}</td>
<td>{{sp.num}}</td>
<td>{{sp.cd}}</td>
<td>{{sp.price | currency: "¥: "}}</td>
<td>{{sp.date | date:"yyyy-MM-dd HH:mm:ss"}}</td>
<td><button ng-click="del(sp.name)">删除</button></td>
</tr>
</tbody>
</table>
<br /><br />
<div style="width: 300px;" ng-show="addShow">
<h3>入库操作</h3>
<input type="text" placeholder="请输入商品名称" ng-model="newName" /><br />
<input type="text" placeholder="请输入商品数量" ng-model="newNum" /><br />
<input type="text" placeholder="请输入商品产地" ng-model="newCd" /><br />
<input type="text" placeholder="请输入商品单价" ng-model="newPrice" /><br /><br />
<button ng-click="addNew()">添加</button>
</div>
</center>
</body>
</html>
angular js 循环数据(死数据) 添加数据 隔行换色 单个删除 排序相关推荐
- NotePad++使用正则表达式在文末(数据尾部)添加数据,尤其是括号怎么加!
NotePad++使用正则表达式在文末(数据尾部)添加数据,尤其是括号怎么加! 当我们开发过程中,写Sql语句查询很多个id的数据,比如 写sql语句就需要用引号 '' 把每个id引起来,用逗号 , ...
- 骂骂咧咧的 fastreport 数据隔行换色
1, 我要吐槽的是, 这破玩意怎么现在还有人在用??? md, 找个文档要找老半天, 还没有, 社区也没有, 还得自己猜 2, 先看数据格式 2.1 数据格式 dataList, 就是我们的数据表, ...
- JS比较常用的隔行换色和获取焦点以及失去焦点效果
JS作为一门比较简单的编程 当然一些JS效果的使用是不可避免的 就比如说标签的隔行换色.还有搜索框的失去和获取焦点 我就来带大家写一下这两种常用的效果 先来说一下标签的隔行换色吧 目录 一.元素标签的 ...
- js数组往队头添加数据、js数组从队头移出数据
1.js数组往队尾添加数据可以用数组API Array.prototype.push 可以往数组尾部添加元素 2.js数组往队尾添加数据可以用数组API Array.prototype.pop 可以把 ...
- python中的数据写入与添加数据写入文件(to_csv)
很多情况下,大家可能会遇到相同情况,就是现在有一些数据需要保存在某个文件里面,但是后续会不断更新添加新的数据,例如在爬虫的时候,一页一页爬取数据的时候,当然可以将所有页数据先合并到一起,再保存起来,但 ...
- 用Navicat for MySQL往数据表中添加数据时汉字出现乱码
添加数据时,记录中为汉字的字符串,显示为? 出现问题的原因:编码格式错误. 在设计表中修改,不起作用 重新建立数据库,设置编码格式,重新创建表,添加记录,成功. 创建数据库时要设置编码格式,如图所示 ...
- 在mysql中删除数据后,添加数据,id值依然从删除的位置开始增加,问题详解。
+----+--------------+-----+----------------------+----------+ | id | name | age | email | isActive | ...
- SQL Server数据库关系图和数据库中数据的操作(添加,查询,修改,删除)
文章目录 一.创建数据库关系图 二.数据的操作 1.添加数据 (1) 添加单行数据 (2) 添加多行数据 2.简单查询数据 3.修改数据 4.删除数据 5.还原数据表 三.数据库的设计 1.主键的选择 ...
- mysql创建数据表并添加数据的相关命令及操作(二)
文章目录 前言 建表演示 添加表数据 前言 随着上一篇创建MySQL基本的创建数据库完成,那么本文就来在数据库中创建表并添加学生信息的基础内容为演示 首先打开登录进MySQL,输入查看数据库的指令. ...
最新文章
- FilenameFilter的使用
- addShutdownHook钩子
- Cocos2D-X2.2.3学习笔记5(UI系统)
- 不同阶QAM调制星座图中,符号能量的归一化计算原理
- 用Typescript如火如荼地进行angular.js
- 动态切换数据库连接配置简单示例
- matlab2c使用c++实现matlab函数系列教程-abs函数
- 大数据可视化平台有什么优势
- 小白自定义bat文件一键启动电脑应用
- 国产代码审计工具Pinpoint介绍
- 用java中的map解析微信MicroMsg里的CompatibleInfo.cfg和systemInfo.cfg
- 动态数码管显示(proteus仿真图和程序)
- memcached面试专题
- 水质环境监测系统解决方案
- 北大成立人工智能研究院,中科院院士黄如担任院长
- 什么时候做都不晚——十大大器晚成的人物
- 利用redis生成订单号
- 独乐乐不如众乐乐,4款名不见经传的精品软件,一个比一个好用
- AcWing 327 玉米田
- 帆软初级证书 第二部分 数知鸟 答案