フィルタとソートを使用した角型顧客指令

Question

userTypeからng-repeatのいずれかを使用してjsonオブジェクトをソートする必要があります。今、私はデータを取得して表示することができました。問題は、私は次の2つの異なるテーブルを並べ替えて表示する必要があるということです。 1つは結婚のためのもので、もう1つはSINGLEのものです。

私はng-repeatを使用すると結婚/シングルをソートすることができ、2つのテーブルに表示する必要があります。任意の提案/ヘルプは、それがキーを複数回として「personalInfo」を持っているとして、あなたの答えで

.controller('userInfo', ['$scope', 'userService', function ($scope, userService) { 
     userService.getuserList().then(function (users) { 
     users = { 
       "personalInfo": { 
        "firstName": "Richardoo", 
        "lastName": "Gil", 
        "maritalStatus": "Married",      
        "percentage": "50" 
     },"personalInfo": { 
        "firstName": "Richardoo", 
        "lastName": "Gil", 
        "maritalStatus": "Single",      
        "percentage": "50" 
     }, 
     "personalInfo": { 
        "firstName": "Richardoo", 
        "lastName": "Gil", 
        "maritalStatus": "Married",      
        "percentage": "50" 
     }} 

     $scope.users = users; 
     }); 
    }]) 

.directive('userDetails', function() { 
     return { 
     restrict: 'E', 
     scope: { 
      users: '=' 
     }, 
     controller: function ($scope) { 
      $scope.showEdit = function() { 
      $scope.isEdit = true; 
      } 
     }, 
     template: `<div class="table-responsive"> 
     <table class="table"> 
      <thead> 
       <tr> 
        <th>Name</th> 
        <th>Relation</th> 
        <th>Percentage</th> 
        <th></th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr data-ng-repeat="user in users"> 
        <td>{{user.personalInfo.firstName}} {{user.personalInfo.lastName}}</td> 
        <td>{{user.userRelations.relationshipType}}</td> 
        <td><span ng-if="!isEdit">{{user.personalInfo.percent}}</span><input type="text" 
          ng-if="isEdit" ng-model="user.personalInfo.percent" class="form-control"></td> 
        <td><a ng-click="showEdit()" href="#">Update</a></td> 
       </tr> 
      </tbody> 
      <tfoot> 
       <tr> 
        <td colspan="2">Total Percentage</td> 
        <td>100%</td> 
        <td><a ng-if="!isEdit" ng-click="showEdit()" href="#">Update</a><a ng-if="isEdit" ng-click="showEdit()" href="#">Save Percentage</a></td> 
       </tr> 
      </tfoot> 
     </table> 
    </div>` 
     }; 
    }) 

    <div class="container"> 
    <div class="row"> 
     <div class="col-md-9"> 
      <h1>Update User Information</h1> 
      <div data-ng-controller="user"> 
       <div data-ng-controller="userInfo"> 
        <user-details user="users"></user-details> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

ユーザーが有効なオブジェクトではありません....理解されるであろう。

HTML、結婚とシングルのための2つのテーブルを作成するためのuserDetailsディレクティブテンプレート関数

で

<div class="row"> 
    <div class="col-md-9"> 
     <h1>Update User Information</h1> 
      <div data-ng-controller="user"> 
       <div data-ng-controller="userInfo"> 
        <user-details user="users" userfilter="single"></user-details> 
        <user-details user="users" userfilter="married"></user-details> 
       </div> 
      </div> 
    </div> 
</div> 

変更を

  users = [{ 
        "firstName": "Richardoo", 
        "lastName": "Gil", 
        "maritalStatus": "Married",      
        "percentage": "50" 
       },{ 
        "firstName": "Richardoo", 
        "lastName": "Gil", 
        "maritalStatus": "Single",      
        "percentage": "50" 
       },{ 
        "firstName": "Richardoo", 
        "lastName": "Gil", 
        "maritalStatus": "Married",      
        "percentage": "50" 
       }]; 

：あなたは代わりのようなオブジェクトの配列を作成する必要があります

  <tbody> 
       <tr data-ng-repeat="user in users | filter:{maritalStatus:$attrs.userfilter}"> 
        <td>{{user.personalInfo.firstName}} {{user.personalInfo.lastName}}</td> 
        <td>{{user.userRelations.relationshipType}}</td> 
        <td><span ng-if="!isEdit">{{user.personalInfo.percent}}</span><input type="text" 
          ng-if="isEdit" ng-model="user.personalInfo.percent" class="form-control"></td> 
        <td><a ng-click="showEdit()" href="#">Update</a></td> 
       </tr> 
      </tbody> 

Answer 2

<tr data-ng-repeat="user in users | filter:{maritalStatus:userfilter}"></tr> 

$ scope.sortType = 'x.user'