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 相关文章推荐
javascript globalStorage类代码
Jun 04 Javascript
Mootools 1.2教程 事件处理
Sep 15 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
Apr 09 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 Javascript
如何在微信小程序中实现Mixins方案
Jun 20 Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 Javascript
vue实现下载文件流完整前后端代码
Nov 17 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
咖啡的化学
2021/03/03 咖啡文化
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
浅谈PHP的反射机制
2016/12/15 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
MooTools 1.2介绍
2009/09/14 Javascript
JS与C#编码解码
2013/12/03 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
Python 命令行参数sys.argv
2008/09/06 Python
python处理二进制数据的方法
2015/06/03 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
基督教婚礼主持词
2014/03/14 职场文书
承诺书的格式范文
2014/03/28 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
2014年团总支工作总结
2014/11/21 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
学习党史心得体会2016
2016/01/23 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB
如何用JS实现简单的数据监听
2021/05/06 Javascript