JSFiddle - React, Tailwind, and code Playground

by GruffBunny

HTML

<div ng-app='MyModule' ng-controller="MyController">
    <div ng-repeat='n in things track by $index'>
        <book-container ng-if='n==0' items='[things[$index]]' colstyle='zero-style'>qw</book-container>
        <book-container ng-if='n!=0' items='[things[$index]]' colstyle='non-zero-style'>xc</book-container>
    </div>
</div>

JavaScript

angular.module('MyModule', [])

.controller('MyController', function( $scope ) {
    $scope.things = [0, 1, 2, 3, 4, 0, 5, 6];
})

.directive('bookContainer', function() {
  return {
    scope: {
      'items': '=',
      'colstyle': '@'
    },
    restrict: 'E',
    template: '<div>style: {{colstyle}}<p ng-repeat="item in items">book: {{item}}</p></div>'
  };
});