JSFiddle - React, Tailwind, and code Playground

by Kirti Vishwakarma

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 
 

<div ng-app="mainApp" ng-controller="myController" id="mainController" class="container">

 <div ng-repeat="value in myArray">
   <strong>Title:</strong> {{ value.title }}
   <strong>List:</strong> {{ value.list }}
   <br/>
  
   <strong>List With filter:</strong>
   <ul ng-repeat="elem in (value.list | customSplitString)">
  	 <li>{{ elem }}</li>
   </ul>
  
 </div>

</div>

JavaScript

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

 
 app.controller('myController', function($scope, $timeout) {
 	$scope.myArray = [
 		{'title' : 'Language','list' : 'PHP,C,C++,Java,Jquery,SQL'},
 		{'title' : 'Color','list' : 'Red,Blue,Pink'},
 		{'title' : 'Company','list' : 'BMW,Swift'},
 	];
 });

 app.filter('customSplitString', function() {
  return function(input) {
    var arr = input.split(',');
    return arr;
  };
 });