angularjs的基本增删改查

最新推荐文章于 2023-12-04 11:43:38 发布
最新推荐文章于 2023-12-04 11:43:38 发布
阅读量389 收藏 3
点赞数
分类专栏： 前端学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41161483/article/details/79732207
版权

效果图：


以下直接代码展示：

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" />&nbsp;&nbsp;&nbsp; 排序：
<select ng-model="orderKey">
<option value="">--请选择--</option>
<option value="name">名称正序</option>
<option value="-name">名称倒序</option>
<option value="price">价钱正序</option>
<option value="-price">价钱倒序</option>
</select>&nbsp;&nbsp;&nbsp;
<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);" />&nbsp;&nbsp;
<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>

二级联动：




Lxy20180101
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AngularJS模块化开发--增删改查
12-13
通过这个项目，开发者不仅可以学习到AngularJS的基本用法，还能了解到如何结合其他工具和库，如RequireJS和Bootstrap，构建一个完整的、具有增删改查功能的Web应用。这样的实践有助于提升开发者在现代Web开发中的...
2、angularJS的基本使用和应用，实现项目信息的增删改查
weixin_43421537的博客
03-01 328
使用angularJs需要在body标签中声明np-app 如果使用自定义的app，需要将app写在script标签中，如：ng-app=“pyg” 如果使用自定义的controller，需要将自定义的controller写在body标签中，如：ng-controller=“brandController” 指定某个属性的默认值，在body标签中使用init，如：ng-init=“属性名=‘默认属...
使用AngularJS实现网页页面上的增、删、查
zjc_null的博客
01-14 492
使用AngularJS实现网页页面上的增、删、查 首先，导入AngularJS第三方jar包，在这里，我使用的是第三方jar包，还可以使用网络上获取的jar包 下面是一些angularjs逻辑操作代码 var app = angular.module("MyApp",[]); app.controller("Mycon",function($scope){ //获
MATLAB读取指定的行数txt_(Testbench用法总结)1. Testbench中文本数据的存储读取操作对比...
weixin_39844481的博客
11-21 673
写时一时爽，调试火葬场；多么深刻的说明了在整体设计过程中，调试所占据的重要性，而仿真调试也是调试里面重要的一环。为了巩固自己的Testbench编写技术，为了与大家交流调试经验，写出这篇文章与大家共同交流。本文主要讲述Testbench中如何读取和存储文本文件的数据，涉及到基础的Verilog语法。对一些数据处理的模块进行调试仿真，模块需要特定的数据输入，比如单一频率的正弦波；为了解决这个问题，我...
AngularJs增删改查
L59_1的博客
12-18 682
AngularJs的增删改查,排序,全选全不选,批量删除<script type="text/javascript" src="../js/angular.min.js"></script> <script type="text/javascript"> var app=angular.module("myApp",[]); app.
angularjs的增删改查
changten的博客
11-19 326
angularjs自己定义一个数组 var app = angular.module("myApp", []);   app.controller("myCtrl", function($scope) {       $scope.user= [/*{               "id": 1,               "name": "张三1",              
angularjs增删 改查
08-06
在AngularJS中，"增删改查"是数据管理的基本操作，通常涉及到以下几个关键知识点： 1. **数据绑定**：AngularJS 的双向数据绑定是其核心特性之一，允许视图和模型之间的数据自动同步。使用`ng-model`指令，可以在...
用AngularJS做的静态的增删改查
10-24
在"用AngularJS做的静态的增删改查"项目中，我们将探讨如何利用AngularJS实现基本的CRUD（Create, Read, Update, Delete）操作，这对于任何Web应用都是基础且重要的功能。 1. **数据绑定**：AngularJS的核心特性之...
angular 学习，增删改查
06-05
这个"angular 学习，增删改查"项目是基于AngularJS的实战应用，旨在教授如何在Web应用中实现数据的增、删、改、查基本操作，这对于任何Web开发者来说都是至关重要的技能。 在AngularJS中，数据绑定是其核心特性之一...
Struts2实现增删改查和登录校验
12-30
在这个“Struts2实现增删改查和登录校验”的项目中，我们将探讨如何使用Struts2框架来构建一个基础的Web应用，涵盖数据操作和用户验证的关键功能。 首先，了解Struts2的基本架构至关重要。Struts2的核心是Action类...
AngularJS实现表格的增删改查（仅限前端）
12-11
用AngularJS实现对表格的增删改查（仅限前端），具体代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>实现表格的增删改查</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/h
angularJs实现学生信息的增删改查以及翻页
01-23
angularJs实现学生信息的增删改查以及翻页，界面优美，
angularjs 实现增删改查
01-28
angularjs 实现mysql数据库的增删改查demo 后台使用java
AngularJs实现增,删,改,查(全)
baipenggui_bo
12-18 3306
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/angular.min.js"></script> <...
angularJS简易增删改查
梵韵
03-30 642
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, u
angularJs 增删改查
chy521xin的博客
01-16 314
tbody tr:nth-child(even) { background-color: pink; } tbody tr:nth-child(odd) { background-color: yellow; } var app = angular.module("myApp", []); app.controller("myCtrl", function($scop
Angular 从零开始，快速上手
最新发布
JAVA开发区的博客
12-04 3862
AngularJS诞生于2009年，由 Misko Hevery 等人创建，后为Google所收购。是一款由Google开发优秀的前端JS框架，于2010年首次发，已经被用于Google的多款产品当中。MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。AngularJS的核心思想是使用MVC（）架构模式来构建Web应用程序。在AngularJS出现之前，Web开发中存在许多挑战。
angularJS简介、环境搭建（脚手架）及组件创建
mantou_riji的博客
05-21 1719
文章目录angularJS是什么angularJS的特点与Jquery的比较 angularJS是什么 jQuery是JS的一个函数库，而angularJS是Google开源的前端JS结构化框架。 官网：https://angular.cn/ 离线手册下载：https://www.php.cn/xiazai/shouce/58 angularJS的特点 双线数据绑定 声明式依赖注入 解耦应用逻辑，数据模型和视图 完善的页面指令 定制表单验证 Ajax封装 与Jquery的比较 JS函数库 放入 .
anjular JS
xiechunhua_Blog的博客
07-06 343
当网页加载完毕，AngularJS 自动开启，AngularJS 指令是以 ng 作为前缀的 HTML 属性。ng-app 指令告诉 AngularJS，&lt;div&gt; 元素是 AngularJS 应用程序 的"所有者",即ng-app=" "  定义angularJS的使用范围；（ 1.ng-app是一个特殊的指令，一个HTML文档只出现一次，如出现多次也只有第一个起作用；ng-app可...
用angularJS写网页增删改查的实验目的
06-02
实验目的： 1. 了解AngularJS的基本概念和特点； 2. 掌握AngularJS的数据绑定和指令等核心功能； 3. 学会使用AngularJS实现网页增删改查功能； 4. 提高前端开发能力，为实际项目开发打下基础。 实验内容： 1. 学习AngularJS的基础知识，包括模块、控制器、指令、服务等； 2. 设计网页的数据模型，包括表单、列表等数据结构； 3. 使用AngularJS实现数据绑定，实现在网页上显示和编辑数据； 4. 使用AngularJS实现数据的增删改查功能； 5. 将实现的网页上传到服务器上，测试其功能和稳定性。 实验步骤： 1. 学习AngularJS的基础知识，阅读官方文档并做相应的练习； 2. 设计网页的数据模型，包括表单、列表等数据结构； 3. 使用AngularJS实现数据绑定，实现在网页上显示和编辑数据； 4. 使用AngularJS实现数据的增删改查功能； 5. 进行功能测试和优化，确保网页的稳定性和可用性； 6. 将实现的网页上传到服务器上，进行线上测试和部署。 注意事项： 1. 实验过程中需要注意代码的规范性和可读性； 2. 需要注意数据的安全性和合法性； 3. 需要注意网页的性能和响应速度； 4. 需要定期备份代码和数据，以防数据丢失。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值