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 相关文章推荐
判断客户端浏览器是否安装了Flash插件的多种方法
Aug 11 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
使用React实现轮播效果组件示例代码
Sep 05 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
jQuery表单验证之密码确认
May 22 jQuery
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
Vue2.0 实现移动端图片上传功能
May 30 Javascript
小程序自定义日历效果
Dec 29 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 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 面试碰到过的问题 在此做下记录
2011/06/09 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
js每次Title显示不同的名言
2008/09/25 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
2016/08/11 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
实例教学如何写vue插件
2017/11/30 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
python读取二进制mnist实例详解
2017/05/31 Python
Python随机函数random()使用方法小结
2018/04/29 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
详解Python中的测试工具
2019/06/09 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
Python如何实现邮件功能
2020/05/27 Python
用python写爬虫简单吗
2020/07/28 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
孝老爱亲模范事迹
2014/01/24 职场文书
卖房授权委托书样本
2014/10/05 职场文书
优秀团支部申报材料
2014/12/26 职场文书
个人汇报材料范文
2014/12/30 职场文书
Python 如何解决稀疏矩阵运算
2021/05/26 Python
MySQL读取JSON转换的方式
2022/03/18 MySQL