Question

我有代码预览，显示json对象。我想在每行之前添加行号。代码工作得很好，但我无法在每行之前添加行号。我使用angularJS 1.5.8。为了使用angularJS json滤镜显示json I＆＃m; m。

我希望它看起来像那样：

1 | {
2 |    "a": 1,
3 |    "b": 2
4 | }

现在看起来像是：

{
    "a": 1,
    "b": 2
}

我的html模板：

<pre id="previewArea"><code>{{ $ctrl.myObj | json : 4}}</code></pre>

我的angularJS组件：

ctrl.myObj={
        a:1,
        b:2
    }

Answer 1

这是一个解决方法，它涉及使用新行爆炸json过滤数据，然后使用span连接每一行：

angular.module('app', [])
  .controller('Controller', function($scope, $filter, $sce) {
    $scope.sampleObj = {
      "a": 1,
      "b": 2
    }

    $scope.myObj = '<span>' + $filter('json')($scope.sampleObj).split("\n").join('</span><span>') + '</span>';
    $scope.myObj = $sce.trustAsHtml($scope.myObj);
  })

pre {
  background: #303030;
  color: #f1f1f1;
  padding: 10px 16px;
  border-radius: 2px;
  border-top: 4px solid #00aeef;
  -moz-box-shadow: inset 0 0 10px #000;
  box-shadow: inset 0 0 10px #000;
}

pre span {
  display: block;
  line-height: 1.5rem;
  counter-increment: line;
}

pre span:before {
  content: counter(line);
  display: inline-block;
  border-right: 1px solid #ddd;
  padding: 0 .5em;
  margin-right: .5em;
  color: #888
}

<!DOCTYPE html>

<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="Controller">
    <pre class="code" ng-bind-html="myObj">
    </pre>
  </div>
</body>

</html>

我想在每行之前添加行号，我使用angularJs json过滤器

1 个答案: