JSFiddle - React, Tailwind, and code Playground

by jazahn

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
    <input type="text" ng-model="searchText"/>
    <ul>
        <li ng-repeat='person in people | filter:searchText' ng-show='person.live == true'>#{{person.id}} {{person.name}}</li>
    </ul>
    <input type="text" ng-model="newPerson"/>
    <button ng-click='addNew()'>Add</button>
</div>

JavaScript

var app = angular.module('MyTutorialApp', []);

app.controller("MainController", function($scope){
    $scope.selectedPerson = 0;
    $scope.selectedGenre = null;
    $scope.people = [
        {
			id: 0,
			name: 'Leon',
			music: [
				'Rock',
				'Metal',
				'Dubstep',
				'Electro'
			],
            live: true
		},
		{
			id: 1,
			name: 'Chris',
			music: [
				'Indie',
				'Drumstep',
				'Dubstep',
				'Electro'
			],
            live: true
		},
		{
			id: 2,
			name: 'Harry',
			music: [
				'Rock',
				'Metal',
				'Thrash Metal',
				'Heavy Metal'
			],
            live: false
		},
		{
			id: 3,
			name: 'Allyce',
			music: [
				'Pop',
				'RnB',
				'Hip Hop'
			],
            live: true
		}
	];
    $scope.newPerson = null;
    $scope.addNew = function(){
        if($scope.newPerson != null && $scope.newPerson != ""){
            $scope.people.push({
                id: $scope.people.length,
                name: $scope.newPerson,
                live: true,
                music: []
            });
        }
    }
});