HTML angularJS 查找商品名称数量

最新推荐文章于 2020-12-16 00:53:08 发布

潜水断桥

最新推荐文章于 2020-12-16 00:53:08 发布

阅读量278

点赞数

本文链接：https://blog.csdn.net/qq_37454196/article/details/78784987

版权

这篇博客探讨了如何利用AngularJS的强大功能在HTML页面中实现商品名称和数量的查找功能。通过创建数据绑定和指令，开发者可以轻松地实现动态搜索和过滤商品列表，提高用户交互体验。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/angular.min.js"></script>
		<script>
			angular.module("myapp", []).controller("democ", function($scope) {
				
				$scope.ord="price";  
				$scope.isjia=false;

				$scope.aa = [{name: "洋葱",price: 2,num: 2}, 
				{name: "大葱",price: 4,num: 12}, 
				{name: "胡萝卜",price: 1,num: 2}, 
				{name: "牛肉",price: 50,num: 12}];

				//定义函数名,能被视图调用
				$scope.save = function() {
					$scope.aa.push({
						name: "iPhone8x",
						price: 8800
					});
				}
			})
		</script>
		<style>
		</style>
	</head>
	<body ng-app="myapp" ng-controller="democ">
		<input placeholder="请输入查找的商品名称" ng-model="selname" />
		<input placeholder="请输入查找的商品数量" ng-model="selnum" />
		<table border="1px" width="500px">
			<tr>
				<th><span ng-click="ord='name';isjia=!isjia"> 商品名称 </span></th>
				<th><span ng-click="ord='price';isjia=!isjia"> 商品价格</span></th>
				<th><span ng-click="ord='num';isjia=!isjia">商品数量</span></th>
			</tr>
			<tr ng-repeat="a in aa|filter:{name:selname,num:selnum}|orderBy: ord:isjia">
				<td>{{a.name}}</td>
				<td>{{a.price}}</td>
				<td>{{a.num}}</td>
			</tr>
		</table>
		<button ng-click="save()">保存</button>
	</body>
</html>