JSFiddle - React, Tailwind, and code Playground

by Nicholas Pappas

HTML

<div ng-app="nguiApp">

    <script type="text/ng-template" id="objTemplate.html">
        <div class="object-group-header">
          <span>{{ type.name }}</span>
          <span ng-if="filterText">({{ filteredList.length }})</span>
          <i class="fa fa-plus-circle"></i>
        </div>
        <div class="object-group-list">
          <ul>
            <li ng-repeat="obj in type.contents" ng-click="selectObject(obj)">{{ obj.name }}</li>
          </ul>
        </div>
    </script>

    <p>Click on bullet entries below. `console.log` should output the object associated with entry.</p>
    
    <div ng-controller="InspectorCtrl">
        <inspector-shared-objects ng-repeat="group in modelSharedObjects" type="group" filter="filterText" on-select="selectObject($obj)"></inspector-shared-objects>
    </div>
</div>

JavaScript

var app = angular.module('nguiApp', [])
.directive('inspectorSharedObjects', function () {
  return {
    restrict: 'E',
    scope: {
      filterText: '=filter',
      type: '=',
      selectObject: '&onSelect'
    },
    controller: function ($scope) {
      $scope.dot = function (tags) {
        return "label-dot-" + tags[0];
      }
    },
    templateUrl: 'objTemplate.html'
  };
});

function InspectorCtrl($scope) {
    $scope.selectObject = function (obj) {
      console.log(obj);
    }
  
    $scope.modelSharedObjects = 
      [
          {
              "name": "Category 1",
              "contents": [
                  {
                  "name": "Item 1a"
                  },
                  {
                  "name": "Item 1b"
                  },
                  {
                  "name": "Item 1c"
                  }
              ]
          },
          {
              "name": "Category 2",
              "contents": [
                  {
                  "name": "Item 2a"
                  },
                  {
                  "name": "Item 2b"
                  },
                  {
                  "name": "Item 2c"
                  }
              ]
          }
      ]; 
}