JSFiddle - React, Tailwind, and code Playground

by charlietfl

HTML

<div>
  <table>
    <thead>
      <tr>
        <th>id</th>
        <th>pos</th>
        <th>value</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="result in vm.results | customFilter">
        <td ng-bind="result.id"></td>
        <td ng-bind="result.pos"></td>
        <td val id="{{result.id}}"></td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript

angular
  .module("app", [])
  .controller('Controller', Controller)
  .factory('factory', factory)
  .directive('val', val)
  .controller('ValController', ValController)
  .filter('customFilter',function(factory){
     var itemValues = factory.values;
     return function(items){
        if(!items) return;
        return items.sort(function(a, b){
            return itemValues[a.pos] > itemValues[b.pos]
        });
        
     }
  
  })

DirectiveController.$inject = ['factory'];

function Controller() {
  var vm = this;

  vm.results = [{
    "id": "1",
    "pos": 1
  }, {
    "id": "2",
    "pos": 2
  }, {
    "id": "3",
    "pos": 3
  }, {
    "id": "4",
    "pos": 4
  }];

  console.info(JSON.stringify(vm.results));
}

function val() {
  return {
    replace: true,
    scope: {},
    bindToController: {
      id: '@'
    },
    controller: ValController,
    controllerAs: 'vm',
    template: '<td ng-bind="vm.value"></td>'
  };
}

function ValController(factory) {

  var vm = this;

  vm.value = factory.getValue(vm.id);
}

function factory() {

  var values = {
    '1': 'green',
    '2': 'blue',
    '3': 'yellow',
    '4': 'red'
  };

  return {
   values: values,
    getValue: function(id) {
      return values[id];
    }
  }
}