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 从if else 到 switch case 再到抽象
Jul 17 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
Vue数据驱动模拟实现5
Jan 13 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
小程序自定义圆形进度条
Nov 17 Javascript
jQuery-App输入框实现实时搜索
Nov 19 jQuery
vue使用echarts实现折线图
Mar 21 Vue.js
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
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
基于Zend的Captcha机制的应用
2013/05/02 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
JavaScript自执行闭包的小例子
2013/06/29 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
深入浅析react native es6语法
2015/12/09 Javascript
Angular实现form自动布局
2016/01/28 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
Python实现的几个常用排序算法实例
2014/06/16 Python
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
让python 3支持mysqldb的解决方法
2017/02/14 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
python脚本和网页有何区别
2020/07/02 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
产品质量保证书
2014/04/29 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
房产公证书样本
2015/01/23 职场文书