带有过滤和排序的 Angular 自定义指令答案

【问题标题】：Angular customer directive with filter and sort带有过滤和排序的 Angular 自定义指令
【发布时间】：2017-08-26 06:08:48
【问题描述】：

我需要通过 ng-repeat 使用 userType 之一对 json 对象进行排序。现在我能够检索和显示数据，问题是我需要在下面的列表中排序和显示两个不同的表；一个是 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>

【问题讨论】：

标签： javascript angularjs json angularjs-directive angularjs-ng-repeat

【解决方案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>

【讨论】：

谢谢，我已经在指令中添加了这样的内容，., 和 HTML - 添加了用户过滤器。但不起作用，我需要在指令中注入 $attrs 吗？
我能够通过 bold**code code**bold....但无法从 html 读取属性。任何人请指导我...
在链接函数或控制器中添加 $attrs.userfilter 作为范围属性，并将其用作模板中的范围属性，而不是作为 $attr.userfilter。这应该有效。

类似这样的：template: '
{{abc}}
', // 这里是 scope.abc 链接 : function (scope, elem, attr) { scope.abc = attr.abc; }

code.directive('userDetails', function () { return {restrict: 'E', scope: { users: '=', userFilter: '@' }, link: function ( $scope) { console.log('scope=', $scope.userFilter); ///这里从html中获取值。 } }, template: <tr data-ng-repeat="user in users | filter: {user.personalInfo.martialStatus: userFilter}"> }; })code.过滤不工作 -bold {user.personalInfo.martialStatus:userFilter}**bold但是当我硬编码值时，比如 *bolduser .personalInfo.martialStatus= 'Single';**bold* 工作正常。