Angularjs CURD 详解及实例代码


Posted in Javascript onSeptember 14, 2016

Angularjs CURD

前言

       基于一个手机端的项目使用了angularjs,硬着头皮去用,有很多的疑问还需要一一去验证,刚开始总是感觉找不到北,总是感觉有很多概念,而且似乎ng既夹杂MVC又夹杂MVVM的思想, 忙里偷闲敲了个简单的CURD demo。 当然顺着这个demo还可以延伸很多知识点,比如: 带分页查询、连接后台数据库、调用WebApi、分层使用Servcice、Factory。

效果图

 Angularjs CURD 详解及实例代码

Angularjs CURD 详解及实例代码

Angularjs CURD 详解及实例代码

<script type="text/javascript">

    var app=angular.module('myApp',[]);

    app.controller('empCtrl',function($scope){

      $scope.emparr=[];

       

      //添加

      $scope.btnclk=function(){

        $scope.emparr.push({'arr_id':$scope.id,'arr_name':$scope.name,'arr_desg':$scope.desg});

        $scope.id='';

        $scope.name='';

        $scope.desg='';

      }

      var key='';

      //编辑

      $scope.edit=function(emp,indx){

        key=indx;

        console.log(indx);

        console.log(emp);

        $scope.id=emp.arr_id;

        $scope.name=emp.arr_name;

        $scope.desg=emp.arr_desg;

      }

      //修改

      $scope.btnupd=function(id,name,desg){

        $scope.emparr[key].arr_id=id;

        $scope.emparr[key].arr_name=name;

        $scope.emparr[key].arr_desg=desg;

         

        $scope.id='';

        $scope.name='';

        $scope.desg='';

      }

       

      $scope.del=function(id){

        $scope.emparr.splice(id,1);

      }

    });

  </script>

以上就是对AngularJS CURD 的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
js实现将选中值累加到文本框的方法
Aug 12 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
基于javascript实现简单计算器功能
Jan 03 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
BootStrap TreeView使用实例详解
Nov 01 Javascript
Vue路由模块化配置的完整步骤
Aug 14 Javascript
vue实现图片懒加载的方法分析
Feb 05 Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 Javascript
Angular Module声明和获取重载实例代码
Sep 14 #Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 #Javascript
Angular 应用技巧总结
Sep 14 #Javascript
AngularJS 所有版本下载地址
Sep 14 #Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
Sep 14 #Javascript
Angularjs 制作购物车功能实例代码
Sep 14 #Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 #Javascript
You might like
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
PHP 选项及相关信息函数库
2006/12/04 PHP
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
详解es6超好用的语法糖Decorator
2018/08/01 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
javascript中的数据类型检测方法详解
2019/08/07 Javascript
JS实现移动端在线签协议功能
2019/08/22 Javascript
Python随机生成带特殊字符的密码
2016/03/02 Python
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
python实现雨滴下落到地面效果
2018/06/21 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
Python for循环与range函数的使用详解
2019/03/23 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
公司节能减排倡议书
2014/05/14 职场文书
投标承诺函格式
2015/01/21 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
同学会感言
2015/07/30 职场文书