JSFiddle - React, Tailwind, and code Playground
by noahua
HTML
<script>
var app = angular.module('MyTutorialApp',[]);
app.controller("MainController", function($scope){
$scope.understand = "I now understand how the scope works!";
$scope.inputValue = '';
$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
}
];
});
</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>
<ul>
<li ng-repeat='person in people | filter:searchText' ng-hide='person.live == false'>#{{person.id}} {{person.name}}</li>
</ul>
</div>