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 使用手册(二)
Sep 23 Javascript
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
javascript中使用css需要注意的地方小结
Sep 01 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
javascript获取web应用根目录的方法
Feb 12 Javascript
javascript适合移动端的日期时间拾取器
Nov 10 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
详解Vue-基本标签和自定义控件
Mar 24 Javascript
详解如何在react中搭建d3力导向图
Jan 12 Javascript
vue treeselect获取当前选中项的label实例
Aug 31 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下将XML转换为数组
2010/01/01 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
学习YUI.Ext第五日--做拖放Darg&amp;Drop
2007/03/10 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
python查询sqlite数据表的方法
2015/05/08 Python
Python引用模块和查找模块路径
2016/03/17 Python
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
PHP面试题及答案二
2015/05/23 面试题
环保小标语
2014/06/13 职场文书
乡镇精神文明建设汇报材料
2014/08/15 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
2014年大学教师工作总结
2014/12/02 职场文书
外贸英文求职信范文
2015/03/19 职场文书
暂住证证明
2015/06/19 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
css3 文字断裂效果
2022/04/22 HTML / CSS
nginx 配置指令之location使用详解
2022/05/25 Servers
vue css 相对路径导入问题级踩坑记录
2022/06/05 Vue.js