AngularJS实现单独作用域内的数据操作


Posted in Javascript onSeptember 05, 2016

照例先看效果

AngularJS实现单独作用域内的数据操作

下面是这个例子的代码:

<!DOCTYPE html>
<html lang="en" ng-app="scApp">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="lib/angular.min.js" type="text/javascript"></script>
</head>
<body ng-controller="scController">
  <div>
    <div ng-repeat="con in content">
      <input type="text" ng-model="con.num1" ng-change="changeNum1(con)"/>
      <input type="text" ng-model="num2" value="con.num2"/>
      <input type="text" ng-model="con.total" ng-change="changeTotal(con)"/>
    </div>
  </div>
</body>
<script>
  var app=angular.module("scApp",[])
      .controller("scController",["$scope", function ($scope) {
        $scope.num2=2;
        $scope.content=[
          {
            num1:1,
            num2:3,
            total:3,
          },
          {
            num1:2,
            num2:3,
            total:6,
          },
          {
            num1:1,
            num2:6,
            total:6,
          }
        ];
        $scope.changeNum1= function (con) {
          con.total=con.num1*con.num2;
        };
        $scope.changeTotal= function (con) {
          con.num1=con.total/con.num2;
        }
}])
</script>
</html>

总结

其实方法非常简单,只需要在每个ng-repeat中传入具体的每一个数据分组就可以实现,例如本例子中的ng-change="changeNum1(con)"<code/>这样就实现了单独的小的数据作用域的控制。

以上就是这篇文章的全部内容,希望对大家学习或使用AngularJS能有所帮助,如果有疑问可以留言交流。

Javascript 相关文章推荐
javascript instanceof 内部机制探析
Oct 15 Javascript
jquery ajax abort()的使用方法
Oct 28 Javascript
js前台分页显示后端JAVA数据响应
Mar 18 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
JS简单验证上传文件类型的方法
Apr 17 Javascript
js中getBoundingClientRect的作用及兼容方案详解
Feb 01 Javascript
nuxt.js 缓存实践
Jun 25 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
微信小程序 如何保持登录状态
Aug 16 Javascript
使用layui的router来进行传参的实现方法
Sep 06 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
Element Dropdown下拉菜单的使用方法
Jul 26 Javascript
Vue.js每天必学之Class与样式绑定
Sep 05 #Javascript
BootStrap使用file-input插件上传图片的方法
Sep 05 #Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 #Javascript
Bootstrap使用基础教程详解
Sep 05 #Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 #Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 #Javascript
Vue.js每天必学之表单控件绑定
Sep 05 #Javascript
You might like
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
PHP常用的三种设计模式
2017/02/17 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
js实现翻页后保持checkbox选中状态的实现方法
2012/11/03 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
Express之托管静态文件的方法
2018/06/01 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
python3.7.0的安装步骤
2018/08/27 Python
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
广州某公司软件工程师面试题
2014/12/22 面试题
生物技术专业毕业生求职信范文
2013/12/14 职场文书
自荐信写法介绍
2014/01/25 职场文书
解除合同协议书
2014/04/17 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书