JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div ng-app='app' ng-controller='ctl as c'>
  <ul>
    <li ng-repeat='item in c.fruits'>
      <div>
        {{item.name}}
      </div>
      <div>
        {{item.basket()}}
      </div>
    </li>
  </ul>
</div>

JavaScript

angular.module('app', [])
.service('fruit', fruit)
.service('basket', basket)
.controller('ctl', ctl);

fruit.$inject = ['basket'];
function fruit(basket) {
	var self = this;
  self.getByIdList = getByIdList;
  self.getAll = getAll;
  
  function getAll() {
  	return data;
  }
  function getByIdList(list) {
  	var length = list.length;
    var returnData = [];
    for(var i = 0; i < length; i++) {
    	returnData.push(data[list[i]]);
    }
    return returnData;
  }
  var data = [
  	{
    	id: 0,
      name: 'apple',
      basket: function() { return basket.getById(this.refs.basket); },
      refs: {
      	basket: 0
      }
    },
    {
    	id: 1,
      name: 'orange',
      basket: function() { return basket.getById(this.refs.basket); },
      refs: {
      	basket: 1
      }
    },
    {
    	id: 2,
      name: 'pear',
      basket: function() { return basket.getById(this.refs.basket); },
      refs: {
      	basket: 2
      }
    }
  ];
}

basket.$inject = ['fruit'];
function basket(fruit) {
	var self = this;
  self.getById = getById;
  self.getAll = getAll;
  
  function getAll() {
  	return data;
  }
  function getById(id) {
  return data[id];
  }
  var data = [
  	{
    	id: 0,
      name: 'basket 1',
      basket: function() { return basket.getByIdList(this.refs.fruits); },
      refs: {
      	fruits: [0,1]
      }
    },
    {
    	id: 1,
      name: 'basket 2',
      basket: function() { return basket.getByIdList(this.refs.fruits); },
      refs: {
      	fruits: [0]
      }
    },
    {
    	id: 2,
      name: 'basket 3',
      basket: function() { return basket.getByIdList(this.refs.fruits); },
      refs: {
      	fruits: [1,2]
      }
    }
  ];
}

ctl.$inject = ['fruit', 'basket'];
function ctl(fruit, basket) {
	var self = this;
  self.fruits = fruit.getAll();
  self.baskets = basket.getAll();
}