<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
//准备数据源
$scope.goods = [
{"name":"冰激凌","price":3,"brand":"蒙牛"},
{"name":"老冰棍","price":1,"brand":"老北京"},
{"name":"西瓜","price":10,"brand":"麒麟"},
{"name":"可乐","price":5,"brand":"百事"}];
//过滤条件
$scope.searchKey;
//排序条件
$scope.orderByKey;
//删除
$scope.deletGoods = function(i){
$scope.goods.splice(i,1);//通过索引删除一条
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
查询：<input type="text" ng-model="searchKey" />
排序条件:<select ng-model="orderByKey">
<option value="">--请选择--</option>
<option value="name">--按名字正序--</option>
<option value="-name">--按名字倒序--</option>
<option value="price">--按价钱正序--</option>
<option value="-price">--按价钱倒序--</option>
</select>
<br />
<table width="400px" border="1px" bordercolor="red" cellpadding="1px" cellspacing="1px" >
<tr style="background-color: grey;">
<td><input type="checkbox"/></td>
<td>序号</td>
<td>名字</td>
<td>价格</td>
<td>品牌</td>
<td>操作</td>
</tr>
<tr ng-repeat="g in goods |filter:searchKey | orderBy:orderByKey">
<td><input type="checkbox"/></td>
<td>{{$index+1}}</td>
<td>{{g.name}}</td>
<td>{{g.price}}</td>
<td>{{g.brand}}</td>
<td><input type="button" value="删除" ng-click="deletGoods($index);"/></td>
</tr>
</table>
</center>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
//准备数据源
$scope.goods = [
{"name":"冰激凌","price":3,"brand":"蒙牛"},
{"name":"老冰棍","price":1,"brand":"老北京"},
{"name":"西瓜","price":10,"brand":"麒麟"},
{"name":"可乐","price":5,"brand":"百事"}];
//过滤条件
$scope.searchKey;
//排序条件
$scope.orderByKey;
//删除
$scope.deletGoods = function(i){
$scope.goods.splice(i,1);//通过索引删除一条
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
查询：<input type="text" ng-model="searchKey" />
排序条件:<select ng-model="orderByKey">
<option value="">--请选择--</option>
<option value="name">--按名字正序--</option>
<option value="-name">--按名字倒序--</option>
<option value="price">--按价钱正序--</option>
<option value="-price">--按价钱倒序--</option>
</select>
<br />
<table width="400px" border="1px" bordercolor="red" cellpadding="1px" cellspacing="1px" >
<tr style="background-color: grey;">
<td><input type="checkbox"/></td>
<td>序号</td>
<td>名字</td>
<td>价格</td>
<td>品牌</td>
<td>操作</td>
</tr>
<tr ng-repeat="g in goods |filter:searchKey | orderBy:orderByKey">
<td><input type="checkbox"/></td>
<td>{{$index+1}}</td>
<td>{{g.name}}</td>
<td>{{g.price}}</td>
<td>{{g.brand}}</td>
<td><input type="button" value="删除" ng-click="deletGoods($index);"/></td>
</tr>
</table>
</center>
</body>
</html>
扫一扫
930
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
