Question

http://plnkr.co/edit/iWTkPrDDvrDdc4LRQjTN?p=preview

代码就像：

<!doctype html>
<html ng-app="docsSimpleDirective">
<head>
  <script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
</head>
<body>
  <div ng-controller="Ctrl">
    <div ng-repeat="line in lines">
      <div ng-repeat="action in actions" format>{{action.content}}</div>
    </div>
  </div>
  <script>
    angular.module('docsSimpleDirective', [])
      .controller('Ctrl', function($scope) {
        $scope.lines = [
          ['11', '12', '13'],
          ['21', '22', '23'],
          ['31', '32', '33']
        ];
        $scope.actions = [{
          content: '{0}'
        }, {
          content: '{2}'
        }];
      })
      .directive('format', function() {
        return function(scope, elm, attrs) {
          scope.action.content = scope.action.content.replace(/\{\d+\}/g, function(number) {
            return scope.line[number.slice(1, -1)];
          });
          //scope.action.content = 1;
        };
      });
  </script>
</body>
</html>

但结果为何： 11 13 11 13 11 13

我期待它 11 13 21 23 31 33

为什么线不变？

Answer 1

<div ng-controller="Ctrl">
    <div ng-repeat="line in lines">
    {{line[0]}} {{line[2]}}
      <!-- <div ng-repeat="action in line" format>{{action}}</div> -->
    </div>
  </div>

我认为对于你的情况你甚至不需要这些行动。就这样做吧。

Answer 2

格式化是filter的工作，而不是指令。尝试：

<div ng-controller="Ctrl">
    <div ng-repeat="line in lines">
      <div ng-repeat="action in actions">{{line | format:action.content }}</div> //Change this line to use filter to format output
    </div>
  </div>
  <script>
    angular.module('docsSimpleDirective', [])
      .controller('Ctrl', function($scope) {
        $scope.lines = [
          ['11', '12', '13'],
          ['21', '22', '23'],
          ['31', '32', '33']
        ];
        $scope.actions = [{
          content: '{0}'
        }, {
          content: '{2}'
        }];
      })
      .filter('format', function() { //Create a filter
        return function(line,content) {
          return content.replace(/\{\d+\}/g, function(number) {
            return line[number.slice(1, -1)];
          });
          //scope.action.content = 1;
        };
      });
  </script>

DEMO

ng-repeat in ng-repeat，范围不变

2 个答案: