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 Timing
Apr 21 Javascript
JQuery 浮动导航栏实现代码
Aug 27 Javascript
jQuery select操作控制方法小结
May 26 Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
详解AngularJS中ng-src指令的使用
Sep 07 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
Dec 13 Javascript
第一个Vue插件从封装到发布
Nov 22 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
electron实现静默打印的示例代码
Aug 12 Javascript
js实现星星打分效果
Jul 05 Javascript
vue路由实现登录拦截
Mar 24 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 程序授权验证开发思路
2009/07/09 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
php对象工厂类完整示例
2018/08/09 PHP
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
jquery中绑定事件的异同
2017/02/28 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
vuejs选中当前样式active的实例
2018/08/22 Javascript
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
python检测是文件还是目录的方法
2015/07/03 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
社会学专业求职信
2014/02/24 职场文书
幼儿园儿童节活动主持词+串词大全
2014/03/21 职场文书
护士工作失误检讨书
2014/09/14 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
政协工作总结2015
2015/05/20 职场文书
文书工作总结(范文)
2019/07/11 职场文书
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL