欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

AngularJS实现单独作用域内的数据操作

程序员文章站 2022-06-30 19:00:07
照例先看效果 下面是这个例子的代码：

照例先看效果

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

上一篇： 20年内人工智能将带来什么惊喜？

下一篇： (Les14 备份与恢复的概念)[20180425]

推荐阅读