var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.songs = [
{
"name": "That I Would Be Good",
"author": "Alanis Morissette",
"tags": [],
"difficulty": 3,
"url": "Alanis Morissette - That I Would Be Good.mid",
"crc": "EC13CE45"
},
{
"name": "Fernando",
"author": "Abba",
"tags": [],
"difficulty": 2,
"url": "Abba - Fernando.mid",
"crc": "A3F8DD01"
},
{
"name": "30 Seconds To Mars",
"author": "Hurricane",
"tags": [],
"difficulty": 1,
"url": "30 Seconds To Mars - Hurricane.mid",
"crc": "68B05C12"
}
];
});
app.filter('search', function () {
function replace(where, what) {
return where.replace(new RegExp(what, 'gi'), '<span class="ListView-search-match">$&</span>');
}
return function (oldSongs, input) {
if(typeof input == "string" && input.length > 0) {
var newSongs = oldSongs.map(function (song) {
return Song.clone(song);
});
var newInput = "(" + input.toLowerCase().split(" ").filter(function (input) {
return input.length > 0;
}).join("|") + ")";
var filteredNewSongs = newSongs.filter(function (newSong, i) {
newSong.name = replace(newSong.name, newInput);
newSong.author = replace(newSong.author, newInput);
newSong.tags.forEach(function (tag, j) {
newSong.tags[j] = replace(tag, newInput);
});
var inTags = newSong.tags.some(function (tag, j) {
return newSong.tags[j] != oldSongs[i].tags[j];
});
return newSong.name != oldSongs[i].name || newSong.author != oldSongs[i].author || inTags;
});
return filteredNewSongs;
} else {
return oldSongs;
}
};
});
var Song;
(function (Song) {
function clone(song) {
return {
name: song.name,
author: song.author,
tags: (song.tags).slice(),
difficulty: song.difficulty,
url: song.url,
crc: song.crc
};
}
Song.clone = clone;
})(Song || (Song = {}));
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" ng-model="songQuery" autofocus="autofocus"/>
<div ng-repeat="song in songs | search:songQuery">
<span ng-bind-html-unsafe="song.name + ' (' + song.author + ')'"></span>
</div>
</body>
</html>
/* Put your css in here */