美文网首页
angularjs中ng-repeat会形成子独立作用域实例

angularjs中ng-repeat会形成子独立作用域实例

作者: MakingChoice | 来源:发表于2016-11-17 11:57 被阅读712次
    ng-repeat内部形成独立scope的使用方法.gif

    首先和大多数指令一样,<code>ng-repeat</code>也会形成一个独立的<code>scope</code>,前面有文章说如何跨<code>scope</code>获取值,另一种情况就是如何使用隔离<code>scope</code>。在开发中经常有这种需求,对于每个<code>ng-repeat</code>出来的模块,需要单独计算,就像图片中那样。

    其实代码很简单,只需要,把<code>ng-repeat</code>传进来的单独每一个小itme传入到对应的函数中就可以了。

    <body ng-controller="repeatController">
              <div ng-repeat="item in tiems">
                       <input type="text" ng-modal="item.num1" ng-change="changeNum1(item)">
                       <input type="text" ng-modal="item.num2" ng-change="changeNum2(item)">
                       <input  type="text" ng-modal="item.total" ng-change="changeTotal(item)"> 
              </div>
    </body>
    
    <script>
              var app=angular.module("app",[]);
              app.controller("repeatController",["$scope",function("$scope"){
                      $scope.itmes=[
                              {
                                    num1:1,
                                    num2:2,
                                    total:2
                               },
                              {
                                    num1:2,
                                    num2:3,
                                    total:5
                               },
                       ];
                      $scope.changeNum1=function(item){
                                 item.total=item.num1*item2
                      };
                      $scope.changeNum2=function(item){
                                 item.total=item.num1*item2
                      };
               }])
    
    </script>
    

    相关文章

      网友评论

          本文标题:angularjs中ng-repeat会形成子独立作用域实例

          本文链接:https://www.haomeiwen.com/subject/yvedpttx.html