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中call()和apply() 的一些理解
May 20 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
详解PHP后期静态绑定分析与应用
Mar 21 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 Javascript
深入分析element ScrollBar滚动组件源码
Jan 22 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 Javascript
Vue是怎么渲染template内的标签内容的
Jun 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与浏览器缓存的分析
2013/06/03 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
PHP xpath()函数讲解
2019/02/11 PHP
jquery $.ajax入门应用二
2008/11/19 Javascript
JavaScript this调用规则说明
2010/03/08 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
python多进程实现进程间通信实例
2017/11/24 Python
对pandas中apply函数的用法详解
2018/04/10 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
【python】matplotlib动态显示详解
2019/04/11 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
网络工程专业毕业生推荐信
2013/10/28 职场文书
20岁生日感言
2014/01/13 职场文书
施工员岗位职责
2014/03/16 职场文书
班级学习计划书
2014/04/27 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
元旦主持词开场白
2015/05/29 职场文书
TS 类型收窄教程示例详解
2022/09/23 Javascript