JSFiddle - React, Tailwind, and code Playground

by hrsetyono

HTML

<section ng-app="myApp" ng-controller="CategoryController as c">
  <h1>Hardcoded category</h1>
  <photo-set category="animal">
    <ul>
      <li ng-repeat="photo in s.photos">{{ photo.src }}</li>
    </ul>
  </photo-set>

  <h1>Using variable</h1>
  <photo-set category="c.category_name">
    <ul>
      <li ng-repeat="photo in s.photos">{{ photo.src }}</li>
    </ul>
  </photo-set>
</section>

JavaScript

var dummyData = [
  { src: "Photo of a dog", category: "animal" },
  { src: "Photo of a mountain landscape", category: "nature" },
  { src: "Photo of a lion", category: "animal" },
  { src: "Photo of a giraffe", category: "animal" },
  { src: "Photo of rainforest jungle", category: "nature" },
];

angular.module("myApp", [])
  .directive("photoSet", function() {
    return {
      restrict: "E",
      scope: true,
      controller: "SetController",
      controllerAs: "s"
    };
  })
  
  .controller("CategoryController", function() {
    this.category_name = "animal";
  })

  .controller("SetController", function($http, $attrs) {
    // supposed to do $http.get, for simpler example, we use dummyData from above
    this.photos = dummyData.filter(function(photo) {
      return photo.category === $attrs.category
    });
  });