ng-repeat在向其中添加图标时会在列表中生成其他行

Question

我有一个列表，显示与案件编号相关的文件。我按如下方式显示它们：

<ul class="doc-list">
                    <li ng-repeat="docs in casedocs">
                        <a ng-href="#" ng-click=loadDocument(docs.Doc_Path)>{{docs.Description}}</a>
                    </li>
                </ul>

这很好用。但是，如果我在列表项前面添加任何内容，我会在列表中添加许多空行。例如，如果我将代码更改为：

<ul class="doc-list">
                    <li ng-repeat="docs in casedocs">
                        X <a ng-href="#" ng-click=loadDocument(docs.Doc_Path)>{{docs.Description}}</a>
                    </li>
                </ul>

列表中有一堆额外的空行。我该怎么做才能阻止这种行为？看两张图片，以显示它看起来是正确的以及错误时的样子：

Answer 1

我检查了你的代码，它运行正常（至少在Chrome和FF中），在链接前添加任意字符后没有创建额外的/空行。无论问题是什么，似乎都不是Angular的错。无论如何，这是代码：

HTML：

<div ng-app="myApp" ng-controller="myCtrl">
  <ul class="doc-list">
      <li ng-repeat="docs in casedocs">
          Xasdf <a href="#" ng-click="loadDocument(docs.Doc_Path)">{{docs.description}}</a>
      </li>
  </ul>
</div>

控制器：

angular.module("myApp", []).controller("myCtrl", ["$scope", function($scope){
  $scope.casedocs = [
    {
      description:"One", 
      Doc_Path:"someUrl"
    },
    {
      description:"Two", 
      Doc_Path:"someUrl"
    },
    {
      description:"Three", 
      Doc_Path:"someUrl"
    }
  ];
  $scope.loadDocument = function(url){
    alert(url);
  }
}]);

Answer 2

我发布此答案以防其他人遇到此问题。该服务显然返回了空记录，这些记录在查看返回的服务和Postman时都被浏览器过滤。我们将服务修复为不返回那些空记录，问题自行解决。