Angularjs CURD 详解及实例代码

2024-04-04 12:43:44

Angularjs CURD

前言

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

效果图

<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 的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！

Angularjs 实现分页功能及示例代码

基于Angularjs实现分页前言学习任何一门语言前肯定是有业务需求来驱动你去学习它,当然ng也不例外,在学习ng前我第一个想做的demo就是基于ng实现分页,除去基本的计算思路外就是使用指令封装成一个插件,在需要分页的列表页面内直接引用. 插件在封装分页插件时我实现了几种方式总体都比较零散,最后找到了一个朋友(http://www.miaoyueyue.com/archives/813.html)封装的插件,觉还不错,读了下他的源码就直接在项目中使用了. 原理和使用说明 1.插件源码主要
AngularJS $injector 依赖注入详解

推断式注入这种注入方式,需要在保证参数名称与服务名称相同.如果代码要经过压缩等操作,就会导致注入失败. app.controller("myCtrl1", function($scope,hello1,hello2){ $scope.hello = function(){ hello1.hello(); hello2.hello(); } }); 标记式注入这种注入方式,需要设置一个依赖数组,数组内是依赖的服务名字,在函数参数中,可以随意设置参数名称,但是必须保证顺序的一致性. v
AngularJS equal比较对象实例详解

使用情况 1 首先,所有满足 a === 3 这种的对象,在angular.equals(a,b)中都会返回真 2 所有对象的类型,以及属性值都相同的,也会返回真 3 NaN和NaN也会返回真(在javascript中,返回的是假) 4 正则也会返回真(在javascirpt,/abc/ /abc/被认为是不相等的) 样例 <html> <head> <meta http-equiv="Content-Type" content="text/ht
AngularJS API之copy深拷贝详解及实例

angular提供了一个可以复制对象的api--copy(source,destination),它会对source对象执行深拷贝. 使用时需要注意下面几点: 如果只有一个参数(没有指定拷贝的对象),则返回一个拷贝对象如果指定了destination,则会深拷贝对象复制给destination 如果source是null或者undefined,那么会直接返回source 如果source就是desitination,那么会报错. 下面看看使用样例: <html> <head> &
AngularJs ng-route路由详解及实例代码

前提首先需要在页面引入angular和angular-route,注意要在angular-route之前引入angular <script src="../../bower_components/angular/angular.js"></script> <script src="../../bower_components/angular-route/angular-route.js"></script> 这主要是
AngularJS 自定义指令详解及实例代码

AngularJS支持用户自定义标签属性,在不需要使用DOM节点操作的情况下,添加自定义的内容. 前面提到AngularJS的四大特性: 1 MVC 2 模块化 3 指令 4 双向数据绑定下面将会介绍如下的内容: 1 如何自定义指令 2 自定义指令的使用 3 自定义指令的内嵌使用如何自定义指令: Angular是基于模块的框架,因此上来肯定要创建一个自己的模块: var myAppModule = angular.module("myApp",[]); 然后在此模块基础上创建指令d
AngularJS bootstrap启动详解及实例代码

对于一般的使用者来说,AngularJS的ng-app都是手动绑定到某个dom元素.但是在一些应用中,这样就显得很不方便了. 绑定初始化通过绑定来进行angular的初始化,会把js代码侵入到html中,但是对于新手使用来说,还是足够了! <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script s
AngularJS 所有版本下载地址

AngularJS官网本身采用AngularJS库构建,页面中的AngularJS库通过Google的CDN(内容分发网络)引入,所以国内访问会有问题. 大家可以从下面地址获取AngularJS所以版本: https://code.angularjs.org/ 各种版本应有尽有,上图为证: 补充说明:每个目录下有对应版本的压缩包,下载压缩包即可更简单的方法:通过Npm包管理工具,或者Bower获取,请自行研究. 以上就是AngularJS 版本下载的资料,后续继续补充相关资料,谢谢大家对本站的
AngularJS 中的Promise --- $q服务详解

先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过Ajax的都能体会到回调的痛苦,同步的代码很容易调试,但是异步回调的代码,会让开发者陷入泥潭,无法跟踪,比如: funA(arg1,arg2,function(){ funcB(arg1,arg2,function(){ funcC(arg1,arg2,function(){ xxxx.... })
AngularJS 模块化详解及实例代码

AngularJS有几大特性,比如: 1 MVC 2 模块化 3 指令系统 4 双向数据绑定那么本篇就来看看AngularJS的模块化. 首先先说一下为什么要实现模块化: 1 增加了模块的可重用性 2 通过定义模块,实现加载顺序的自定义 3 在单元测试中,不必加载所有的内容之前做的几个例子,控制器的代码直接写在script标签里面,这样声明的函数都是全局的,显然不是一个最好的选择. 下面看看如何进行模块化: <script type="text/javascript">
AngularJS 过滤与排序详解及实例代码

前面了解了AngularJS的使用方法,这里就简单的写个小程序,实现查询过滤以及排序的功能. 本程序中可以了解到: 1 angularjs的过滤器 2 ng-repeat的使用方法 3 控制器的使用 4 数据的绑定程序设计分析首先,如果要是先查询过滤,就要使用到AngularJS中的过滤器filter 了. 直接在表达式的后面使用管道命令符 | ,按照下面的写法就可以达到一个过滤的效果: {{ persons | filter:query }} 通过使用filter实现过滤操作,query
AngularJS 自定义过滤器详解及实例代码

AngularJS另一个特点就是提供了过滤器,可以通过操作UNIX下管道的方式,操作数据结果. 通过使用管道,可以便于双向的数据绑定中视图的展现. 过滤器在处理过程中,将数据变成新的格式,而且可以使用管道这种链式风格,还能接受附加的参数. 实现方式下面看一下如何定义声明一个过滤器,首先依然是要创建我们自己的模块myAppModule var myAppModule=agular.module("myApp",[]); 接下来在模块的基础上,创建过滤器: myAppModule.fil

Angularjs CURD 详解及实例代码

相关推荐

随机推荐