<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<div>
<input type="text" name="" id="" value="" placeholder="按名称查询" ng-model="keyName" /><br />
<input type="text" name="" id="" value="" placeholder="按价格查询" ng-model="keyPrice" /><br /> 排序：
<select name="" ng-model="orderkey">
<option value="">---请选择---</option>
<option value="name">名称正序</option>
<option value="-name">名称倒序</option>
<option value="price">价格正序</option>
<option value="-price">价格倒序</option>
</select>
</div>
<div>
<input type="checkbox" name="" id="" value="" ng-model="hy" />
<input type="button" name="" id="" value="批量删除" ng-click="delMore()" />
</div>
<table border="0" cellspacing="0" cellpadding="5">
<tr ng-repeat="x in cars|filter:{name:keyName,price:keyPrice}|orderBy:orderkey">
<td><input type="checkbox" name="" id="" value="{{x.name}}" ng-model="hy" /></td>
<td><img src="{{x.picurl}}" width="100px" /></td>
<td>
<ul style="list-style: none; padding-left: 0px;">
<li>{{x.name}}</li>
<li>类型：{{x.type}}</li>
<li>价格：{{x.price}}</li>
<li>数量：{{x.num}}</li>
<li>小计：{{x.price*x.num|currency:"￥"}}</li>
<input type="button" name="" id="" value="删除" ng-click="del(x.name)" />
</ul>
</td>
</tr>
</table>
<script type="text/javascript">
var app = angular.module("myapp", []);
app.controller("myctrl", function($scope) {
$scope.cars = [{
name: "宝马x3",
type: "suv",
price: 50000,
num: 2,
picurl: "http://d2.yiche.com/inner-dsp-public/6072b5f1199f6b3592383a543cf99103.jpg"
},
{
name: "宝马",
type: "轿车",
price: 60000,
num: 2,
picurl: "http://d2.yiche.com/inner-dsp-public/6ed8bfc8d91a8f0c0f16c356f2d29734.jpg"
},
{
name: "宝来",
type: "suv",
price: 20000,
num: 1,
picurl: "http://d2.yiche.com/inner-dsp-public/4c970fd58dacf702d3f7e13d1b0259b1.jpg"
}
];
$scope.del=function(cname)
{
if(confirm("你确定删除吗？"))
{
for(var i=0;i<$scope.cars.length;i++)
{
if($scope.cars[i].name=cname)
{
$scope.cars.splice(i,1);
break;
}
}
}
}
$scope.delMore = function() {
var cbs = $("td input:checked");
if(cbs.length == 0) {
alert("请选择");
} else {
cbs.each(function() {
for(var i = 0; i < $scope.cars.length; i++) {
if($scope.cars[i].name == $(this).val()) {
$scope.cars.splice(i, 1);
break;
}
}
})
}
}
});
</script>
</body>