当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > AngularJS实现单独作用域内的数据操作

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

2018年05月10日  | 移动技术网IT编程  | 我要评论

照例先看效果

下面是这个例子的代码：

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网