JSFiddle - React, Tailwind, and code Playground

by Farhat Ullah

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://cdn.wijmo.com/5.20143.35/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20143.35/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20143.35/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20143.35/interop/angular/wijmo.angular.min.js"></script>
<div ng-app="app" ng-controller="appCtrl">
     <br/>
    Wijmo ListBox
    <br/>
    <wj-list-box style="height:150px;width:250px"  isContentHtml=true,
        item-Formatter = customItemFormatter items-source="countries" ></wj-list-box>
        
</div>

CSS

.wj-listbox-item:not(.wj-state-selected)>.wj-alt-item{
  background-color:red;
  padding:3px 10px;
}
.wj-listbox-item:not(.wj-state-selected)>.wj-item{
    background-color:#fff;
    padding:3px 10px;
}
.wj-listbox-item:not(.wj-state-selected){
    padding:0!important;
}

JavaScript

// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);

// controller
app.controller('appCtrl', function ($scope) {
    // as an ICollectionView
    var items = [];
     // as an array
    var countrieslist = ['Pakistan', 'China','India'];
    $scope.countries = countrieslist;
 
    $scope.customItemFormatter=function(index, content) {
    alert(index+' '+ content);    
        if(content=="China"){
        	content =""+content+'<span style="float:right;background-color:grey;padding:0 2px;cursor:pointer;">X</span>';  
        }
        if(index%2!=0){
        	content ='<div class="wj-item">'+content+'</div>';
        }
        if(index%2==0){
      //  alert('adf')
        	content ='<div class="wj-alt-item">'+content+'</div>';
        }       
    	return content;
  	}    
});