I am trying to display a "No result" message when the search field does not have any matches. The current filter is working fine, but it does not show the message when there are no results. How can I achieve this?
<div class="portfolio-list-wrap" ng-controller="LatestProjectCtrl">
<input type="text" ng-model="search.$"/>
<div class="portfolio-thumb" ng-repeat="work in works.project | filter:search">
<img src="images/{{work.string}}.jpg" alt="{{work.name}}"/>
<h4>{{work.name}}</h4>
<i>{{work.date}}</i>
</div>
</div>
Here is my factory implementation:
var myApp = angular.module('myApp', []);
myApp.factory('Works', function(){
var Works = {}
Works.project =[
{
name : "project1",
string : "projectstring1",
date: "17 August 2012"
},
{
name : "project2",
string : "projectstring2",
date: "12 December 2013"
},
{
name : "project3",
string : "projectstring3",
date: "17 September 2012"
},
{
name : "project3",
string : "projectstring4",
date: "17 August 2012"
},
];
return Works;
})
function LatestProjectCtrl($scope, Works){
$scope.works = Works;
}