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中需要注意的细节问题小结
Dec 06 Javascript
解析window.open的使用方法总结
Jun 19 Javascript
html+js实现动态显示本地时间
Sep 21 Javascript
JQuery $.each遍历JavaScript数组对象实例
Sep 01 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
Angular2的管道Pipe的使用方法
Nov 07 Javascript
JS数组的高级使用方法示例小结
Mar 14 Javascript
vue从零实现一个消息通知组件的方法详解
Mar 16 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 Javascript
小程序实现录音功能
Sep 22 Javascript
前端vue如何使用高德地图
Nov 05 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实现用户注册登录功能
2016/10/14 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
对Python 数组的切片操作详解
2018/07/02 Python
树莓派实现移动拍照
2019/06/22 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
canvas像素画板的实现代码
2018/11/21 HTML / CSS
String和StringBuffer的区别
2015/08/13 面试题
ddl,dml和dcl的含义
2016/05/08 面试题
大学班级学风建设方案
2014/05/01 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
杨善洲观后感
2015/06/04 职场文书
安全守法证明
2015/06/23 职场文书