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 相关文章推荐
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
jQuery使用元素属性attr赋值详解
Feb 27 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
JavaScript之RegExp_动力节点Java学院整理
Jun 29 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
Jun 28 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
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
2011/06/30 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
php中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
javascript:以前写的xmlhttp池,代码
2008/05/18 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
seajs1.3.0源码解析之module依赖有序加载
2012/11/07 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
AngularJs表单校验功能实例代码
2017/02/09 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
Python实现高效求解素数代码实例
2015/06/30 Python
Tensorflow 查看变量的值方法
2018/06/14 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
介绍一下Mysql的存储引擎
2015/02/12 面试题
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
新闻编辑自荐信
2013/11/03 职场文书
七年级英语教学反思
2014/01/15 职场文书
职工运动会邀请函
2014/02/02 职场文书
投标承诺书范本
2014/03/27 职场文书
解除财产保全担保书
2014/05/20 职场文书
Python多线程 Queue 模块常见用法
2021/07/04 Python
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP