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 全选效果实现代码
Mar 23 Javascript
javascript forEach通用循环遍历方法
Oct 11 Javascript
js复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 Javascript
详解Angular CLI + Electron 开发环境搭建
Jul 20 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
对node.js中render和send的用法详解
May 14 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 28 Javascript
vue通过数据过滤实现表格合并
Nov 30 Javascript
谈谈JavaScript中的函数
Sep 08 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
php面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
常用的javascript设计模式
2017/01/11 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
讲解Python中的标识运算符
2015/05/14 Python
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
奇怪的鱼:Weird Fish
2018/03/18 全球购物
英文简历中的自我评价用语
2013/12/09 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
优秀护士演讲稿
2014/04/30 职场文书
新学期开学标语
2014/06/30 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
担保书格式范文
2015/09/22 职场文书
教师听课学习心得体会
2016/01/15 职场文书
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python