前言

基于一个手机端的项目使用了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的更多相关文章

  1. [angularjs] MVC + Web API + AngularJs 搭建简单的 CURD 框架

    MVC + Web API + AngularJs 搭建简单的 CURD 框架 GitHub 地址:https://github.com/liqingwen2015/Wen.MvcSinglePage ...

  2. angularjs和ajax的结合使用 (二)

    今天我们来继续丰富上次的例子.我们来搞些 稍微复杂点的应用. 首先我们来加一个全选 的功能. 上一篇的例子里我们看到 分页时载入的是我们通过linq 查询自定义列 然后构建的匿名类 .使用这种EF框架 ...

  3. AngularJS之初级Route【一】(六)

    前言 这一节我们来讲讲AngularJS中的路由以及利用AngularJS在WebAPi中进行CRUD.下面我们一起来看看. 话题 当我们需要进行路由映射时即用到$route服务,在AngularJS ...

  4. [后端人员耍前端系列]AngularJs篇:30分钟快速掌握AngularJs

    一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用 ...

  5. 精通AngularJS 读书笔记(1)

    邂逅AngularJS AngularJS是采用JavaScript语言编写的客户端MVC框架,帮助开发者编写现代化的单页面应用.尤其适合编写有大量CURD操作的,具有AJAX风格的富客户端应用. 使 ...

  6. 30分钟快速掌握AngularJs

    [后端人员耍前端系列]AngularJs篇:30分钟快速掌握AngularJs   一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来 ...

  7. 学习笔记-AngularJs(七)

    在学习笔记-AngularJs(六)提及了事件处理器和过滤器以及它们的例子,而我们知道之前我是使用$http服务去获得我们需要的json数据,但是$http是比较底层的用法,有时候我们想把获取json ...

  8. AngularJs快速上手掌握

    一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用 ...

  9. 通过AngularJS实现前端与后台的数据对接(二)——服务(service,$http)篇

    什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...

随机推荐

  1. H5文件操作api--持续完善中

    Drop Here <input type="file" onchange="upload(this)" /></p> <div ...

  2. 爬虫初探(2)之requests

    关于请求网络,requests这个库是爬虫经常用到的一个第三方库. import requests url = 'http://www.baidu.com' #这里用get方法用来请求网页,其他还有p ...

  3. PHP基础知识之字符串运算符

    两个字符串相加用 . 运算符(类似于+),如$a="str1" . "str2";$b=$a . "str3";=>"str ...

  4. 第一篇博客 用笨办法学python-14 提示和传递

    # 代码如下: usr_name = input("")script = input("")prompt = '> 'print("hi %s, ...

  5. Git ignore UserInterfaceState.xcuserstate

    1. 退出xcdoe, 打开终端(Terminal),进入到你的项目目录下 2. 在终端键入  git rm --cached [YourProjectName].xcodeproj/project. ...

  6. Unity依赖注入使用详解

    写在前面 构造器注入 Dependency属性注入 InjectionMethod方法注入 非泛型注入 标识键 ContainerControlledLifetimeManager单例 Unity注册 ...

  7. iOS7的启动画面设置及asset catalogs简介

    如果上网搜索一下“iOS App图标设置”或者“iOS App启动画面设置”肯定能找到不少文章,但内容大多雷同,就是让你按照某种尺寸制作若干张png图片,再按照苹果的命名规范,加入到项目中去,一行代码 ...

  8. Silverlight及WPF中实现自定义BusyIndicator

    在开发Silverlight或者WPF项目时,当我们调用Web服务来加载一些数据时,由于数据量比较大需要较长的时间,需要用户等待,为了给用户友好的提示和避免用户在加载数据过程中进行重复操作,我们通常使 ...

  9. adb server is out of date. killing...

    1.查看adb端口号 adb nodaemon server 打印:cannot bind 'tcp:5037' 2.查看端口被哪个进程占用 netstat -ano | findstr " ...

  10. Sharing A Powerful Tool For Calculate Code Lines

    最近正好需要统计下某项目代码行数,然后就找代码行数统计工具.以前找到过一个正则表达式,但是只有在VS2010下有用,VS2012和VS2013下的统计就不好使了. 接着搜索了一下代码行数统计绿色工具免 ...