Question

我想在值显示中使用ng-repeat，但不显示.extension。

我的代码如下：

<tr ng-repeat="(key, doc) in documentdetails.Root[0].Record">
    <td>
       <a class="link" target="_blank" href="../admin/views/documents/{{doc}}">{{ doc }}</a>
   </td>

{{doc}}我知道abc.pdf这是pdf文件的名称，但我想只显示abc而不显示.extension。

如何解决？

Answer 1

尝试使用split

 <td>
   <a class="link" target="_blank" 
      href="../admin/views/documents/{{doc.split('\.')[0]}}">{{ doc }}</a>
 </td>

Answer 2

您可以使用以下过滤器：

var app = angular.module('app', []);
app.controller("controller", function($scope) {
  $scope.doc = "abc.pdf";
})
app.filter('filename', function() {
  return function(input) {
    return input.split(".")[0];
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="controller">
  {{doc|filename}}
</div>

Answer 3

在视图中使用简单的拆分功能，不要将其应用于href，如下所示

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.documentdetails = {"Root":[{"Record":["documents.php","OSHA_lockout_regulation.pdf","LOTO_Matrix_2016.docx","LOTO_Log_2016.pdf","Sample_LOTO_policy.pdf","iLockitOut_Help.pdf","Employee_Training.pdf"]}]};
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <table>
    <tr ng-repeat="(key, doc) in documentdetails.Root[0].Record">
    <td>
        <a class="link" target="_blank" href="../admin/views/documents/{{doc}}" >{{ doc.split('\.')[0] }}</a>
    </td>
    </tr>
    </table>
  </body>

</html>

不显示时ng-reapeat中的角度js显示值名称.extension

3 个答案: