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实现的分页函数
Feb 07 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
Oct 01 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
May 13 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
基于jQuery实现仿微博发布框字数提示
Jul 27 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
在vue中使用公共过滤器filter的方法
Jun 26 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
May 09 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
smarty实例教程
2006/11/19 PHP
PHP实现把MySQL数据库导出为.sql文件实例(仿PHPMyadmin导出功能)
2014/05/10 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
php将金额数字转化为中文大写
2015/07/09 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
检测是否已安装 .NET Framework 3.5的js脚本
2009/02/14 Javascript
Array.prototype.slice 使用扩展
2010/06/09 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
Python中AND、OR的一个使用小技巧
2015/02/18 Python
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
改进Django中的表单的简单方法
2015/07/17 Python
如何利用Fabric自动化你的任务
2016/10/20 Python
Python的时间模块datetime详解
2017/04/17 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
python常用排序算法的实现代码
2019/11/08 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
描述RIP和OSPF区别以及特点
2015/01/17 面试题
股东授权委托书
2014/10/15 职场文书
运动会开幕式致辞
2015/07/29 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书