如何在ng-repeat中使用指令进行排序？

Question

  

当我进行排序时，不对图像进行排序以及与

HTML like

<table style="width:100%">
<thead>
    <tr>
      <th style="width:10%" class="text-center">
        <a href="" ng-click="sortType = 'Group'; sortReverse = !sortReverse">
            Group
            <span ng-show="sortType == 'Group' && !sortReverse" class="fa fa-caret-down"></span>
            <span ng-show="sortType == 'Group' && sortReverse" class="fa fa-caret-up"></span>
            <span ng-show="sortType != 'Group'" class="fa fa-sort"></span>
        </a>
    </th>
    <th>
    <a href="" ng-click="sortType = 'Name'; sortReverse = !sortReverse">
            Name 
            <span ng-show="sortType == 'Name' && !sortReverse" class="fa fa-caret-down"></span>
            <span ng-show="sortType == 'Name' && sortReverse" class="fa fa-caret-up"></span>
            <span ng-show="sortType != 'Name'" class="fa fa-sort"></span>
        </a>
    </th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="objdata in students">
        <td style="width:10%" class="text-center">
            <span dirGroup="objdata.Group"></span>
        </td>
        <td style="width:90%" class="text-center">
            {{objdata.Name}}
        </td>
    </tr>
</tbody>

  

当我进行排序时，不对图像进行排序以及与

angular
.module('app')
..directive('dirGroup', [function () {
    return {
        restrict: 'A',
        scope: {
            dirGroup: '='
        },
        compile: function (element) {
            element.removeAttr('dirGroup');
            return function (scope, element, attrs) {

                var objdata = scope.dirGroup;

                var GroupID = objdata;

                var strHtml_StatusImage = '<img src="../../assets/images/Group0.png?"  >';
                if (GroupID == 0) {
                    strHtml_StatusImage = '<img src="../../assets/images/Group0.png?"  >';
                }
                else if (GroupID == 1) {
                    strHtml_StatusImage = '<img src="../../assets/images/Group1.png?"  >';
                }
                else if (GroupID == 2) {
                    strHtml_StatusImage = '<img src="../../assets/images/Group2.png?" >';
                }
                else if (GroupID == 3) {
                    strHtml_StatusImage = '<img src="../../assets/images/Group3.png?"  >';
                }
                else if (GroupID == 4) {
                    strHtml_StatusImage = '<img src="../../assets/images/Group4.png?"  >';
                }
                else if (GroupID == 5) {
                    strHtml_StatusImage = '<img src="../../assets/images/Group5.png?"  >';
                }
                else {
                    strHtml_StatusImage = '<img src="../../assets/images/Group0.png?" >';
                }

                var link = '' + strHtml_StatusImage + '';
                element.append(link);
                //}
            }
        }
    }
}])
.controller('StudentController', ['$scope', StudentController] )
function StudentController()
{
    var vm = $scope;

    var students=[{Name : "Bhadresh", Group : 1}, {Name : "Mihir", Group : 5},
    {Name : "Mohini", Group : 1}, {Name : "Mukul", Group : 1},
    {Name : "Dhaval", Group : 3}, {Name : "Dhiren", Group : 4},
    {Name : "Sandeep", Group : 4}, {Name : "Jignesh", Group : 1},
    {Name : "Deepak", Group : 1}, {Name : "Jigar", Group : 3},
    {Name : "Mahesh", Group : 5}, {Name : "Mitesh", Group : 1},
    {Name : "Naresh", Group : 2}, {Name : "Mohini", Group : 2},
    {Name : "Nikunj", Group : 1}, {Name : "Mahi", Group : 1}];

    vm.sortType = "Group";
    vm.sortReverse = false;

    Getdata();

    function GetData()
    {
        vm.students= students;
    }
}

  

当我进行排序时，不对图像进行排序以及与

Answer 1

  

根据你的代码，我意识到你实际上并不需要该指令。       你需要有一个基于上面编写的代码的过滤器，底部样本。

＆＃13;

＆＃13;

var app = angular.module('app', []);

app.controller('StudentController', function StudentController($scope)
{
    var self = this;

    self.students= [
    {Name : "Bhadresh", Group : 1}, 
    {Name : "Mihir", Group : 5},
    {Name : "Mohini", Group : 1}, 
    {Name : "Mukul", Group : 1},
    {Name : "Dhaval", Group : 3}, 
    {Name : "Dhiren", Group : 4},
    {Name : "Sandeep", Group : 4},
    {Name : "Jignesh", Group : 1},
    {Name : "Deepak", Group : 1}, 
    {Name : "Jigar", Group : 3},
    {Name : "Mahesh", Group : 5}, 
    {Name : "Mitesh", Group : 1},
    {Name : "Naresh", Group : 2}, 
    {Name : "Mohini", Group : 2},
    {Name : "Nikunj", Group : 1}, 
    {Name : "Mahi", Group : 1}
    ];

    ////sort by default
    self.sortType = "Group";
    self.sortReverse = false;
});

app.filter('myFilter', function() {
  return function(group) {
      switch(group){
        case 1:
          //you can use image
          return "group 1 <br> <i class='fa fa-eye'></i>  <br> <small>you can replace with image</small>";
        case 2:
          //you can use image
          return "group 2 <br> <i class='fa fa-blind'></i>  <br> <small>you can replace with image</small>";
        case 3:
          //you can use image
          return "group 3 <br> <i class='fa fa-bell'></i> <br> <small>you can replace with image</small>";
        case 4:
          //you can use image
          return "group 4 <br> <i class='fa fa-cc'></i>  <br> <small>you can replace with image</small>";
        case 5:
          //you can use image
          return "group 5 <br> <i class='fa fa-bolt'></i>  <br> <small>you can replace with image</small>";
      }
  }
});

app.filter('to_trusted', ['$sce', function($sce){
        return function(text) {
            return $sce.trustAsHtml(text);
        };
    }]);

＆＃13;

<html ng-app="app" ng-controller="StudentController as self">

  <head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
  </head>
  <body>
  
<table class="table table-bordered">
<thead>
    <tr>
      <th class="text-center" ng-click="self.sortType = 'Group';self.sortReverse = !self.sortReverse">
            Group
            <span ng-show="self.sortType == 'Group' && !self.sortReverse" class="fa fa-caret-down"></span>
            <span ng-show="self.sortType == 'Group' && self.sortReverse" class="fa fa-caret-up"></span>
            <span ng-show="self.sortType != 'Group'" class="fa fa-sort"></span>
    </th>
    <th class="text-center" ng-click="self.sortType = 'Name';self.sortReverse = !self.sortReverse">
            Name 
            <span ng-show="self.sortType == 'Name' && !self.sortReverse" class="fa fa-caret-down"></span>
            <span ng-show="self.sortType == 'Name' && self.sortReverse" class="fa fa-caret-up"></span>
            <span ng-show="self.sortType != 'Name'" class="fa fa-sort"></span>
    </th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="student in self.students | orderBy:self.sortType:self.sortReverse">
        <td class="text-center">
          <span ng-bind-html='student.Group | myFilter | to_trusted'></span>
        </td>
        <td class="text-center">
            {{student.Name}}
        </td>
    </tr>
</tbody>
  </table>
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

  </body>
  
</html>

＆＃13;

＆＃13;

＆＃13;