核心提示：abgular简单商品查删效果代码实现 scriptvar app = angular.module(myApp,[]);app.controller(myCtrl,function($scope){...
abgular简单商品查删效果代码实现
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.products=[
{id:231,
name:"iphone",
price:"126346222"
},
{id:2313,
name:"ipr",
price:"132131231222"
},
{id:21,
name:"App",
price:"1224553453422"}
];
$scope.sortFlag="-";
$scope.sortName="name";
//定义排序功能
$scope.sortProducts = function(clomnName){
$scope.sotrName = clomnName;
if($scope.sortFlag == "-"){
$scope.sortFlag="";
}else{
$scope.sortFlag="-";
}
}
//删除指定商品
$scope.deleteProduct = function(name){
for(index in $scope.products){
if($scope.products[index].name == name){
$scope.products.splice(index,1);
}
}
}
//全部删除
$scope.deleteAll = function(){
$scope.products = null;
}
});
</script>
</head>
<body>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>商品列表</h3>
<input type="text" ng-model="serach" placeholder="产品名称" />
<button ng-click="deleteAll()">全部删除</button><br /><br />
<table border="1 solde" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th ng-click="sortProducts('id')">产品编号</th>
<th ng-click="sortProducts('name')">产品名称</th>
<th ng-click="sortProducts('price')">产品价格</th>
<th>功能</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="goods in products | filter:serach | orderBy:(sortFlag+sortName)">
<td>{{goods.id}}</td>
<td>{{goods.name}}</td>
<td>{{goods.price}}</td>
<td><button ng-click="deleteProduct(goods.name)">删除</button></td>
</tr>
</tbody>
</table>
</center>
</body>
</body>
