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 相关文章推荐
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 Javascript
JavaScript自学笔记(必看篇)
Jun 23 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
js推箱子小游戏步骤代码解析
Jan 10 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 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
PHP中显示格式化的用户输入
2006/10/09 PHP
使用php实现截取指定长度
2013/08/06 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
php foreach如何跳出两层循环(详解)
2016/11/05 PHP
PHP使用Curl实现模拟登录及抓取数据功能示例
2018/04/27 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
JS中getYear()和getFullYear()区别分析
2014/07/04 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
React中的render何时执行过程
2018/04/13 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
应用数学自荐书范文
2013/11/24 职场文书
警察思想汇报
2014/01/04 职场文书
实习护士自荐信
2014/06/21 职场文书
大学军训通讯稿
2015/07/18 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
Python自然语言处理之切分算法详解
2021/04/25 Python