angularjs的基本增删改查
2018-03-28 19:09
399 查看
效果图：
以下直接代码展示：
css样式
<script src="lib/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<style>
th,
td {
width: 80px;
text-align: center;
}
/**定义两个颜色样式**/
.yellow {
background-color: yellow;
}
.red {
background-color: red;
}
</style>
angularjs代码
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
//模拟数据
$scope.goods = [{
"id": 1,
"name": "小米6",
"price": 1600,
"product": "北京"
},
{
"id": 2,
"name": "华为p10",
"price": 4200,
"product": "东莞"
},
{
"id": 3,
"name": "vivox20",
"price": 2600,
"product": "佛山"
}
];
//查询关键字
$scope.seacherKey = "";
//排序关键字
$scope.orderKey = "";
//全选复选框的绑定字段
$scope.checkAll = false;
//显示添加模块，，默认不显示
$scope.showAdd = false;
//创建和新增商品信息相绑定的字段属性
$scope.name = "";
$scope.price = "";
$scope.product = "";
//添加按钮的点击事件
$scope.addGood = function() {
var good = {};
//把输入的值给good对象
good.name = $scope.name;
good.price = $scope.price;
good.product = $scope.product;
//将good对象添加的goods数据源中
$scope.goods.push(good);
//隐藏添加区域
$scope.showAdd = false;
}
//控制table是否显示
$scope.showTable = true;
//删除
$scope.deleteGood = function(gname) {
//遍历数据源找到要删除的数据
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].name == gname) {
$scope.goods.splice(i, 1); //$scope.goods.splice($index,1);//从$index开始，删除1条
break; //删除后跳出循环
}
}
//如果删光了，隐藏table的头
if($scope.goods.length == 0) {
$scope.showTable = false;
}
}
//是否显示修改回显区域
$scope.showUpdate = false;
$scope.upIndex = "";
//定义接收修改信息的字段
$scope.upname = "";
$scope.upprice = "";
$scope.upproduct = "";
var updateGood = ""; //要修改的商品信息
//修改按钮的监听事件
$scope.showGood = function(gname) {
//显示修改区域
$scope.showUpdate = true;
//遍历数组找到要修改的信息
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].name == gname) { //找到了需要修改的信息
updateGood = $scope.goods[i];
break;
}
}
//显示修改信息到页面，，第一步得到修改信息
$scope.upname = updateGood.name;
$scope.upprice = updateGood.price;
$scope.upproduct = updateGood.product;
}
//点击提交修改按钮
$scope.updateGood=function(){
updateGood.name = $scope.upname;//把新的名字替换旧名字
updateGood.price = $scope.upprice;
updateGood.product = $scope.upproduct;
//隐藏修改区域
$scope.showUpdate=false;
}
//批量删除
$scope.deleteMore=function(){
if ($scope.checkAll) {
$scope.goods=[];
}else{//不是全删除
var checked=$("input:checkbox:checked");
for(var i= checked.length-1;i>=0;i--){//从大往小遍历选中的复选框
$scope.goods.splice(checked[i].value,1);//通过复选框中的索引，到数据源中删除数据，，从下往上删除
}
}
}
});
</script>
布局代码
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<div>查询：<input type="text" placeholder="请输入查询关键字" ng-model="seacherKey" /> 排序：
<select ng-model="orderKey">
<option value="">--请选择--</option>
<option value="name">名称正序</option>
<option value="-name">名称倒序</option>
<option value="price">价钱正序</option>
<option value="-price">价钱倒序</option>
</select>
<input type="button" value="入库/增加" ng-click="showAdd=!showAdd" />
</div>
<br />
<div ng-show="showAdd">
商品名称：<input type="text" placeholder="请输入商品名称" ng-model="name" /><br /> 商品价钱：
<input type="number" placeholder="请输入商品价钱" ng-model="price" /><br /> 商品产地：
<input type="text" placeholder="请输入商品产地" ng-model="product" /><br />
<input type="button" value="添加" ng-click="addGood();" />
</div>
<div style="margin-right: 10px;"><input type="button" value="批量删除" ng-click="deleteMore();" /></div><br />
<table ng-show="showTable" border="1px" bordercolor="green" cellpadding="1px" cellspacing="0px">
<tr style="background-color: gray;">
<th><input type="checkbox" ng-model="checkAll" /></th>
<th>序号</th>
<th>id</th>
<th>商品名称</th>
<th>价钱</th>
<th ng-click="orderKey='product'">产地</th>
<th style="width: 110px;">操作</th>
</tr>
<tr ng-repeat="g in goods| filter:seacherKey | orderBy:orderKey" class="{{$index%2? 'yellow':'red'}}">
<td><input type="checkbox" value="{{$index}}" ng-model="checkAll" /></td>
<td>{{$index}}</td>
<td>{{g.id}}</td>
<td>{{g.name}}</td>
<td>{{g.price}}</td>
<td>{{g.product}}</td>
<td>
<input type="button" value="删除" ng-click="deleteGood(g.name);" />
<input type="button" value="修改" ng-click="showGood(g.name);" />
</td>
</tr>
</table>
<br />
<div ng-show="showUpdate">
商品名称：<input type="text" ng-model="upname" /><br /> 商品价钱：
<input type="number" ng-model="upprice" /><br /> 商品产地：
<input type="text" ng-model="upproduct" /><br /><br />
<input type="button" value="提交修改" ng-click="updateGood();" />
</div>
</center>
<p>{{goods}}</p>
</body>
二级联动：
以下直接代码展示：
css样式
<script src="lib/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<style>
th,
td {
width: 80px;
text-align: center;
}
/**定义两个颜色样式**/
.yellow {
background-color: yellow;
}
.red {
background-color: red;
}
</style>
angularjs代码
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
//模拟数据
$scope.goods = [{
"id": 1,
"name": "小米6",
"price": 1600,
"product": "北京"
},
{
"id": 2,
"name": "华为p10",
"price": 4200,
"product": "东莞"
},
{
"id": 3,
"name": "vivox20",
"price": 2600,
"product": "佛山"
}
];
//查询关键字
$scope.seacherKey = "";
//排序关键字
$scope.orderKey = "";
//全选复选框的绑定字段
$scope.checkAll = false;
//显示添加模块，，默认不显示
$scope.showAdd = false;
//创建和新增商品信息相绑定的字段属性
$scope.name = "";
$scope.price = "";
$scope.product = "";
//添加按钮的点击事件
$scope.addGood = function() {
var good = {};
//把输入的值给good对象
good.name = $scope.name;
good.price = $scope.price;
good.product = $scope.product;
//将good对象添加的goods数据源中
$scope.goods.push(good);
//隐藏添加区域
$scope.showAdd = false;
}
//控制table是否显示
$scope.showTable = true;
//删除
$scope.deleteGood = function(gname) {
//遍历数据源找到要删除的数据
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].name == gname) {
$scope.goods.splice(i, 1); //$scope.goods.splice($index,1);//从$index开始，删除1条
break; //删除后跳出循环
}
}
//如果删光了，隐藏table的头
if($scope.goods.length == 0) {
$scope.showTable = false;
}
}
//是否显示修改回显区域
$scope.showUpdate = false;
$scope.upIndex = "";
//定义接收修改信息的字段
$scope.upname = "";
$scope.upprice = "";
$scope.upproduct = "";
var updateGood = ""; //要修改的商品信息
//修改按钮的监听事件
$scope.showGood = function(gname) {
//显示修改区域
$scope.showUpdate = true;
//遍历数组找到要修改的信息
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].name == gname) { //找到了需要修改的信息
updateGood = $scope.goods[i];
break;
}
}
//显示修改信息到页面，，第一步得到修改信息
$scope.upname = updateGood.name;
$scope.upprice = updateGood.price;
$scope.upproduct = updateGood.product;
}
//点击提交修改按钮
$scope.updateGood=function(){
updateGood.name = $scope.upname;//把新的名字替换旧名字
updateGood.price = $scope.upprice;
updateGood.product = $scope.upproduct;
//隐藏修改区域
$scope.showUpdate=false;
}
//批量删除
$scope.deleteMore=function(){
if ($scope.checkAll) {
$scope.goods=[];
}else{//不是全删除
var checked=$("input:checkbox:checked");
for(var i= checked.length-1;i>=0;i--){//从大往小遍历选中的复选框
$scope.goods.splice(checked[i].value,1);//通过复选框中的索引，到数据源中删除数据，，从下往上删除
}
}
}
});
</script>
布局代码
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<div>查询：<input type="text" placeholder="请输入查询关键字" ng-model="seacherKey" /> 排序：
<select ng-model="orderKey">
<option value="">--请选择--</option>
<option value="name">名称正序</option>
<option value="-name">名称倒序</option>
<option value="price">价钱正序</option>
<option value="-price">价钱倒序</option>
</select>
<input type="button" value="入库/增加" ng-click="showAdd=!showAdd" />
</div>
<br />
<div ng-show="showAdd">
商品名称：<input type="text" placeholder="请输入商品名称" ng-model="name" /><br /> 商品价钱：
<input type="number" placeholder="请输入商品价钱" ng-model="price" /><br /> 商品产地：
<input type="text" placeholder="请输入商品产地" ng-model="product" /><br />
<input type="button" value="添加" ng-click="addGood();" />
</div>
<div style="margin-right: 10px;"><input type="button" value="批量删除" ng-click="deleteMore();" /></div><br />
<table ng-show="showTable" border="1px" bordercolor="green" cellpadding="1px" cellspacing="0px">
<tr style="background-color: gray;">
<th><input type="checkbox" ng-model="checkAll" /></th>
<th>序号</th>
<th>id</th>
<th>商品名称</th>
<th>价钱</th>
<th ng-click="orderKey='product'">产地</th>
<th style="width: 110px;">操作</th>
</tr>
<tr ng-repeat="g in goods| filter:seacherKey | orderBy:orderKey" class="{{$index%2? 'yellow':'red'}}">
<td><input type="checkbox" value="{{$index}}" ng-model="checkAll" /></td>
<td>{{$index}}</td>
<td>{{g.id}}</td>
<td>{{g.name}}</td>
<td>{{g.price}}</td>
<td>{{g.product}}</td>
<td>
<input type="button" value="删除" ng-click="deleteGood(g.name);" />
<input type="button" value="修改" ng-click="showGood(g.name);" />
</td>
</tr>
</table>
<br />
<div ng-show="showUpdate">
商品名称：<input type="text" ng-model="upname" /><br /> 商品价钱：
<input type="number" ng-model="upprice" /><br /> 商品产地：
<input type="text" ng-model="upproduct" /><br /><br />
<input type="button" value="提交修改" ng-click="updateGood();" />
</div>
</center>
<p>{{goods}}</p>
</body>
二级联动：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- angularjs基本操作增删改查
- AngularJS（基本使用）动态添加表格数据（增删改查）
- 数据库基本查询语句（SQL常用增删改查语句 简单复习 mark）
- Hibernate基本增删改查操作
- Android SQLite增删查改基本操作
- Angularjs,WebAPI 搭建一个简易权限管理系统 —— 基本功能演示(二)
- angularjs的表格的增删改查（关于商品）
- （angularjs） 最全 数据的增删改查（此代码存在BUG，跪求天神破解！）
- Hibernate 基本增删改查操作
- SQL基本之增删查改操作
- yii笔一----基础，安装，结构，增删改查基本操作
- 第二周：利用上周所学做个员工管理的增删改查（基本的）
- 【ASP】ASP对Access数据库的连接、增删改查及ASP的基本语法
- Android SQLite增删改查、升级的基本使用
- Django数据库基本增删改查操作
- AngularJS 页面基本操作
- zookeeper基本命令，增删改查
- AngularJS - 基本功能介绍
- Android通讯录数据库介绍与基本操作（增删改查）
- MongDB的安装和基本操作 二（增删改查）