JSFiddle - React, Tailwind, and code Playground

by jimfrenette

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<div ng-app="ChinookApp" ng-controller="MainCtrl">
	<div class="span6 body-content">
		<form class="form-horizontal">
			<div class="control-group">
				<label class="control-label" for="inputArtist">Artist</label>
				<div class="controls">
					<select id="inputArtist"
						ng-model="artist.selected"
						ng-options="artist.ArtistId as artist.Name for artist in artists"
						ng-change="artistChanged(artist.selected)">
					</select>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="inputAlbum">Album</label>
				<div class="controls">
					<select id="inputAlbum"
						ng-disabled="artistNotSelected"
						ng-model="album.selected"
						ng-options="album.AlbumId as album.Title for album in albums"
						ng-change="albumChanged(album.selected)">
					</select>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="inputTrack">Track</label>
				<div class="controls">
					<select id="inputTrack"
						ng-disabled="albumNotSelected"
						ng-model="track.selected"
						ng-options="track.TrackId as track.Name for track in tracks">
					</select>
				</div>
			</div>
		</form>
	</div>
</div>

JavaScript

'use strict';

var chinookApp = angular.module('ChinookApp', ['ngResource']);
chinookApp.constant('urlBase', 'https://jimfrenette.com/api/chinook/');
//chinookApp.constant('urlBase', 'http://localhost\\:65374/api/');
chinookApp.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);

chinookApp.factory('ArtistsService', function($resource, urlBase){
    return $resource(urlBase + 'artists', {}, {
        query: {method:'GET', isArray:true}
    });
});
chinookApp.factory('AlbumsService', function($resource, urlBase){
    return $resource(urlBase + 'albums/:artistid', { artistid: '@artistid' }, {
        query: {method:'GET', isArray:true}
    });
});
chinookApp.factory('TracksService', function($resource, urlBase){
    return $resource(urlBase + 'tracks/:albumid', { albumid: '@albumid' }, {
        query: {method:'GET', isArray:true}
    });
});

chinookApp.controller('MainCtrl', function($scope, ArtistsService, AlbumsService, TracksService) {

    $scope.artistNotSelected = true;

    $scope.artists = ArtistsService.query({}, function (artists) {
        artists.unshift({"ArtistId":0,"Name":"-- Select Artist --"});
        $scope.artist = {selected: artists[0].ArtistId};
    });

    $scope.albumNotSelected = true;
    $scope.album = {selected: "0"};
    $scope.trackNotSelected = true;
    $scope.track = {selected: "0"};

    $scope.artistChanged = function(selectedArtistId) {
        $scope.artistNotSelected = !selectedArtistId;
        if ($scope.artistNotSelected)
        {
            $scope.album = {};
        }
        else {
            $scope.albums = AlbumsService.query({ artistid: $scope.artist.selected }, function (albums) {
                albums.unshift({"AlbumId":0,"Title":"-- Select Album --"});
                $scope.album = {selected: albums[0].AlbumId};
                $scope.albumNotSelected = true;
                $scope.tracks =...