JSFiddle - React, Tailwind, and code Playground

by dream apple

HTML

<div ng-app="MyApp">
    <div ng-controller="MyCtrl">
        <div change-list sort="items.sort" list="items.list">
            <div ng-repeat="list in items.list">
            <p>
                <span ng-bind="list.id"></span>
                <span ng-bind="list.text"></span>
                <span>
                    {{list.sort}}
                </span>
            </p>
        </div>
        </div>
    </div>
</div>

JavaScript

angular.module("MyApp", [])
    .controller("MyCtrl", ["$scope", function ($scope) {
    $scope.items = {
sort:[
{id:1,text:"A"},
{id:2,text:"B"},
{id:3,text:"C"}
],
list:[
{id:1,text:"AA",sort:[1,2]},
{id:2,text:"BB",sort:[1,2]},
{id:3,text:"CC",sort:[2,2]}
]
}
}])
.directive("changeList", function(){
    var result = {
        restrict: "AE",
        replace: false,
        scope: {
            sort: "=sort",
            list: "=list"
        },
        link: function(scope, ele, attrs){
            for(var i = 0; i < scope.list.length; i++){
                for(var j = 0; j < scope.list[i].sort.length; j++){
                   scope.list[i].sort.splice(j, 1, scope.sort[scope.list[i].sort[j]-1].text);
                }
            }
        }
    }
    return result;
})