Question

我需要使用userType thru ng-repeat之一对json对象进行排序。现在我能够检索并显示数据，而ISSUE是我需要排序并显示以下列表中的两个不同的表;一个用于MARRIED，另一个用于SINGLE。

当我使用ng-repeat时，如何对已婚/单身进行排序，并且需要在两个表中显示。任何建议/帮助将不胜感激....

.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

您的答案中的用户不是有效对象，因为它多次将“personalInfo”作为键。您应该创建一个对象数组，如：

         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"
               }];

用于创建两个表，已婚和单身，

<强> HTML

<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>

更改userDetails指令模板功能

          <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 =＆＃39; x.user＆＃39;

具有过滤和排序的Angular客户指令

2 个答案: