Question

我想在带有子行的表中显示非嵌套对象，如下所示：

displayResults

AND 能够过滤和排序主行作为子行。我不知道如何显示和过滤子行。我应该实现一个Javascript函数，以便在用户过滤并创建嵌套的子对象时修改我的JSON文件，并使用以下内容： Multi-level tables (inside another if clicked)？还是有一个超级神奇的角色技巧来避免它？！

这是我的 JSON 数据：

var results = [
   {
      "id":48,
      "DocName":"DocName1",
        "OwnerId":"T0000001",
      "Modified":"2012-07-12",
      "MIME_type":"pdf",
      "Author":"TAuth001",
      "Status":"Approved"
   },
   {
      "id":48,
      "DocName":"DocName1",
        "OwnerId":"T0000001",
      "Modified":"2011-08-28",
      "MIME_type":"word",
      "Author":"TAuth007",
      "Status":"Pending"
   },
   {
      "id":48,
      "DocName":"DocName1",
        "OwnerId":"T0000001",
      "Modified":"2017-05-13",
      "MIME_type":"excel",
      "Author":"TAuth008",
      "Status":"Verified"
   },
   {
      "id":25,
      "DocName":"DocName2",
        "OwnerId":"T0000002",
      "Modified":"2014-08-25",
      "MIME_type":"word",
      "Author":"TAuth009",
      "Status":"Pending"
   },
   {
      "id":25,
      "DocName":"DocName2",
        "OwnerId":"T0000002",
      "Modified":"2013-02-12",
      "MIME_type":"pdf",
      "Author":"TAuth010",
      "Status":"Approved"
   },
]

HTML ：

<input name="nom_doc" id="inputText" type="text" placeholder="Search" ng-model="query">

<label >Doc Name : </label><input name="doc_id" ng-model="search1.DocName" type="text">
<label >Doc Id :</label> <input name="doc-name" ng-model="search1.DocId" type="text"></br>
<label >Owner Id : </label><input name="owner" ng-model="search1.OwnerId" type="text">

<label >type MIME </label> <input name="mime"  ng-model="search1.MIME_type" type="text">
<label >DLM Author </label> <input name="author"  ng-model="search1.Author" type="text">
<label >DLM Verifier</label> <input name="status" ng-model="search1.Status" type="text">

<table>
       <tr >
          <th>Ref Objet<br /><a  class="arrowsSort" href="" ng-click="trie1()">∨</a> <a class="arrowsSort" href="" ng-click="trie2()">∧</a></th>
          <th >Doc Name</th>>
          <th >Owner</th>
          <th >Date</th>
          <th >MIME</th>
          <th >Author</th>
          <th >Status</th>
      </tr>

      <tr id="searchResult" ng-repeat="document in results | orderBy:orderByArray | filter:search | filter:search1">
        <td >{{document.id}}</td>
        <td >{{document.DocName}}</td>
        <td >{{document.OwnerId}}</td>
        <td >{{document.DLM_Verifier}}</td>
        <td >
          <table>
            <tr ng-repeat="doc in document.DLM_Verifier">
              {{doc}}
            </tr>
          </table>
        </td>
        <td >{{document.Modified}}</td>
        <td >{{document.MIME_type}}</td>
        <td >{{document.Author}}</td>
        <td >{{document.Status}}</td>
    </tr>
</table>

SCRIPT ：

var app= angular.module("DocumentSearch");

app.controller("DocumentCtrl",  function($scope, $location) {

$scope.search = function (obj) {
        return (angular.lowercase(obj.DocId).indexOf(angular.lowercase($scope.query) || '') !== -1 ||
                angular.lowercase(obj.TRN).indexOf(angular.lowercase($scope.query) || '') !== -1  ||
                angular.lowercase(obj.BusinessId).indexOf(angular.lowercase($scope.query) || '') !== -1  ||
                angular.lowercase(obj.Ext_Oth).indexOf(angular.lowercase($scope.query) || '') !== -1  ||
                angular.lowercase(obj.DocName).indexOf(angular.lowercase($scope.query) || '') !== -1);
    };

    $scope.trie1 = function () {
      $scope.orderByArray = [];
       $scope.orderByArray.push('DocId');
   };

   $scope.trie2 = function () {
     $scope.orderByArray = [];
      $scope.orderByArray.push('-DocId');
  };
}

AngularJS过滤器排序显示非嵌套对象的子行

0 个答案: