JSFiddle - React, Tailwind, and code Playground

by freedawirl

HTML

<div ng-app>
        
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello, {{yourName}}!</h1>
          <hr/>
    Name: <input type=text ng-model="name">
    <br>
    Current user's name: {{name}}

   </div>  
<div ng-app ng-controller="AlbumCtrl">
  <ul>
    <li ng-repeat="image in images">
      <img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
    </li>
  </ul>
</div>

JavaScript

function AlbumCtrl($scope) {
	scope.images = [
        {"thumbnail":"http://www.capmetro.org/uploadedimages/Capmetroorg/Home_Page_Banners/thumb_GetReal_WebBanner.jpg", "description":"Image 01 description"},
		{"thumbnail":"http://www.capmetro.org/uploadedimages/Capmetroorg/Home_Page_Banners/thumb_NewYearsEve2014.jpg", "description":"Image 02 description"},
		{"thumbnail":"capmetro.org/uploadedimages/Capmetroorg/thumb_stuffthebus2014.jpg", "description":"Image 03 description"},
		{"thumbnail":"http://www.capmetro.org/uploadedimages/Capmetroorg/thumb_halloween-banner-3.jpg", "description":"Image 04 description"},
		{"thumbnail":"http://www.capmetro.org/uploadedimages/Capmetroorg/Home_Page_Banners/thumb_PecanStBanner.jpg", "description":"Image 05 description"}
	];
}