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 22 Javascript
15个jquery常用方法、小技巧分享
Jan 13 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
May 11 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
jQuery ajax调用webservice注意事项
Oct 08 jQuery
LayUI表格批量删除方法
Aug 15 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
JS实现音乐导航特效
Jan 06 Javascript
JS实现横向轮播图(中级版)
Jan 18 Javascript
JavaScript字符串转数字的简单实现方法
Nov 27 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
简化php模板页面中分页代码的解析
2009/02/06 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
js表格分页实现代码
2009/09/18 Javascript
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
react redux入门示例
2018/04/19 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
Python matplotlib的使用并自定义colormap的方法
2018/12/13 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
超市总经理岗位职责
2014/02/02 职场文书
大学新生军训方案
2014/05/03 职场文书
道德大讲堂实施方案
2014/05/14 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
标枪加油稿
2015/07/22 职场文书
交通安全学习心得体会
2016/01/18 职场文书
某某店铺的开业庆典主持词范本
2019/11/25 职场文书
500字作文之周记
2019/12/13 职场文书