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 相关文章推荐
jQuery数组处理方法汇总
Jun 20 Javascript
javascript数组去重方法终极总结
Jun 05 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
vue.js中npm安装教程图解
Apr 10 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 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
JpGraph php柱状图使用介绍
2011/08/23 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
php使用curl伪造浏览器访问操作示例
2019/09/30 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
2012/09/14 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
python批量制作雷达图的实现方法
2016/07/26 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
python通过Windows下远程控制Linux系统
2018/06/20 Python
python3中zip()函数使用详解
2018/06/29 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
python线程中的同步问题及解决方法
2019/08/29 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
Python Django搭建网站流程图解
2020/06/13 Python
Python常用类型转换实现代码实例
2020/07/28 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
What is view? why do we have view?
2012/06/22 面试题
初中生毕业评语
2014/12/29 职场文书
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js