AngularJS 中对表格数据进行操作
AngularJS 通过新的属性和表达式扩展了 HTML。
AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications)。
AngularJS 学习起来非常简单。
好了,现在说说AngularJS 中怎么对表格中的数据进行增删改查操作的;
我写了个小案例:
head(头部详细操作如下)
Title
<script type="text/javascript" src="angular.js" ></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.products = [{
id:80,
name:"iphone",
price:5400
},{
id:150,
name:"ipad mini",
price:2200
},{
id:120,
name:"ipad air",
price:2340
},{
id:160,
name:"ipad",
price:1420
},{
id:130,
name:"imac",
price:15400
}];
$scope.sortFlag = "-";
$scope.sortName = "name";
//定义排序功能
$scope.sortProducts = function(clomnName){
$scope.sortName = clomnName;
if($scope.sortFlag == "-"){
$scope.sortFlag = "";
}else{
$scope.sortFlag = "-";
}
}
//删除指定商品
$scope.deleteProduct = function(name){
//alert(name);
//var i = -1;
for(index in $scope.products){
if($scope.products[index].name == name){
//i = index;
$scope.products.splice(index,1);
}
}
}
//全部删除
$scope.deleteAll = function(){
$scope.products = null;
}
});
</script>
看完以上的head部分,应该大概知道body里该做什么了吧,关键body里面都是一些布局,
可以供些参考,不用死布局,以下为body
商品列表
产品编号 产品名称 产品价格 功能 {{goods.id}} {{goods.name}} {{goods.price}}
这就是本章所有内容,今天到此为止,谢谢观看,对您有帮助请记得留下你的大拇指