Angularjs产品信息表制作
来源:互联网 发布:java multiply用法 编辑:程序博客网 时间:2024/06/06 17:20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>week</title>
//需要导入angular.js库文件
<script type="text/javascript" src="file:///D|/安卓第四个月跨平台开发/angular-1.5.5/angular-1.5.5/angular.js" ></script>
<script>
var app = angular.module("myapp",[]);
app.controller("myctrl",function($scope){
$scope.goods = [
{"id":80,"name":"iphone","price":5400,},
{"id":1200,"name":"ipad mini","price":2200,},
{"id":500,"name":"ipad air","price":2340,},
{"id":29,"name":"ipad","price":1420,},
{"id":910,"name":"imac","price":15400,}
];
$scope.bold = "bold";
$scope.title = 'name';
$scope.desc = 0;
$scope.key = '';
//删除
$scope.deletes =function(name){
var p;
for( index in $scope.goods){
p = $scope.goods[index];
if( p.name == name){
$scope.goods.splice(index,1);
alert("是否删除"+name+"商品");
}
}
};
$scope.delall =function(){
alert("删除全部");
$scope.goods.splice($scope.goods);
};
//根据标题title排序
$scope.togg =function(tit){
$scope.title = tit;
$scope.desc = !$scope.desc;
};
});
</script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<center>
<table cellpadding="10" cellspacing="0" border="1">
<tr>
<th><input type="text" ng-model="key" placeholder="请输入产品名称关键字"/></th>
<th colspan="3" align="left" ng-click="delall()">全部删除</th>
</tr>
<tr >
<th ng-click="togg('id')">产品编号▼</th>
<th ng-click="togg('name')">产品名称▼</th>
<th ng-click="togg('price')">产品价格▼</th>
<th>删除</th>
</tr>
<tr ng-repeat="x in goods | filter: {name: key} | orderBy: title : desc">
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>{{x.price | currency:"(RMB)"}}</td>
<td><button ng-click="deletes(x.name)">删除</button></td>
</tr>
</table>
</center>
</body>
</html>
- Angularjs产品信息表制作
- angularjs 制作人员信息表
- angularjs--制作树形菜单
- 产品信息抽取
- angularjs制作购物车功能
- 【资料】TrollTech产品信息
- 浅谈WEB产品信息架构
- 浅谈WEB产品信息架构
- 添加厂商产品信息
- 产品信息系统知识点整理
- DM8148 产品信息技术
- 4.CRM产品信息查询
- android产品信息设置
- 汽车品牌及产品信息汇总
- angularJS学习小记(2)----制作简易计算器
- Angularjs + Bootstrap 制作的一个TODO List
- Angularjs + Bootstrap 制作的一个TODO List
- 使用AngularJS制作一个选项卡
- SPOJ
- php连接redis(phpredis)
- 2018年新浪微博产品笔试题目
- 嵌入式Linux驱动笔记(十四)------详解clock时钟(CCF)框架及clk_get函数
- 2017 ACM-ICPC 亚洲区(西安赛区)网络赛 F. Trig Function(切比雪夫多项式)
- Angularjs产品信息表制作
- 01背包问题
- 2017 ACM-ICPC 亚洲区(青岛赛区)网络赛 待补
- 清除缓存
- leetcode002-数值处理Reverse Integer,Pow(x,n), atoi, Divide Two Integers
- MQTT填坑之旅
- c/c++ 实战之二分查找
- lunbotu
- 【MUI】图片轮播