AngularJS实现单独作用域内的数据操作  更新时间:2016年09月05日 11:49:23   作者:MakingChoice   这篇文章给大家介绍了利用AngularJs如何实现ng-repeat内各个小的子作用域单独数据绑定。有需要的小伙伴们可以参考借鉴,下面来一起看看吧。 照例先看效果 下面是这个例子的代码: 总结 其实方法非常简单,只需要在每个ng-repeat中传入具体的每一个数据分组就可以实现,例如本例子中的ng-change=”changeNum1(con)”这样就实现了单独的小的数据作用域的控制。 以上就是这篇文章的全部内容,希望对大家学习或使用AngularJS能有所帮助,如果有疑问可以留言交流。 您可能感兴趣的文章: Angularjs全局变量被作用域监听的正确姿势 详细谈谈AngularJS的子级作用域问题 关于angularJs指令的Scope(作用域)介绍 浅谈angularJS 作用域 详解JavaScript的AngularJS框架中的作用域与数据绑定 详解AngularJS中的作用域 AngularJS入门教程之Scope(作用域) AngularJS Controller作用域 详解angularjs中的隔离作用域理解以及绑定策略 详谈AngularJs 控制器、数据绑定、作用域 AngularJS中的作用域实例分析 angularjs ng-repeat 作用域 相关文章 解析Angular 2+ 样式绑定方式 这篇文章主要介绍了解析Angular 2+ 样式绑定方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-01-01 使用Angular-CLI构建NPM包的方法 这篇文章主要介绍了使用Angular-CLI构建NPM包的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-09-09 详解angular2采用自定义指令(Directive)方式加载jquery插件 本篇文章主要介绍了详解angular2采用自定义指令(Directive)方式加载jquery插件 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。 2017-02-02 angularjs ui-router中路由的二级嵌套 本篇文章主要介绍了angularjs ui-router中路由的二级嵌套,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。 2017-03-03 AngularJS入门教程之Select(选择框)详解 本文主要介绍AngularJS Select,这里给大家整理一些资料详细讲解,并提供实例代码,有需要的小伙伴参考下 2016-07-07 Angularjs上传图片实例详解 上传图片需要引入插件ngFileUpload,使用bower安装方法,下面通过本文给大家介绍Angularjs上传图片实例详解,希望对大家有所帮助 2017-08-08 Angular ng-class详解及实例代码 这篇文章主要介绍了Angular ng-class的知识,并整理了相关资料,有兴趣的小伙伴可以参考下 2016-09-09 python爬取安居客二手房网站数据(实例讲解) 下面小编就为大家带来一篇python爬取安居客二手房网站数据(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-10-10 详解AngularJS中的表单验证(推荐) AngularJS自带了很多验证,什么必填,最大长度,最小长度…,这里记录几个有用的正则式验证。本文给大家介绍的非常详细,对angularjs中表单验证知识感兴趣的朋友一起学习吧 2016-11-11 详解AngularJS的通信机制 这篇文章主要介绍了AngularJS的通信机制,AngularJS是非常具有人气的JavaScript库,需要的朋友可以参考下 2015-06-06 最新评论

照例先看效果

下面是这个例子的代码:

<!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能有所帮助,如果有疑问可以留言交流。

您可能感兴趣的文章:

  • Angularjs全局变量被作用域监听的正确姿势
  • 详细谈谈AngularJS的子级作用域问题
  • 关于angularJs指令的Scope(作用域)介绍
  • 浅谈angularJS 作用域
  • 详解JavaScript的AngularJS框架中的作用域与数据绑定
  • 详解AngularJS中的作用域
  • AngularJS入门教程之Scope(作用域)
  • AngularJS Controller作用域
  • 详解angularjs中的隔离作用域理解以及绑定策略
  • 详谈AngularJs 控制器、数据绑定、作用域
  • AngularJS中的作用域实例分析
张贴在3