当我在搜索字段中输入内容并且没有匹配时,我只想显示“无结果”消息.
目前,过滤器工作,但是当我键入不给出结果的关键字时,它不显示
“无结果”信息.怎么做？
目前,过滤器工作,但是当我键入不给出结果的关键字时,它不显示
“无结果”信息.怎么做？
<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>
这里是我做了我的工厂
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"
},string : "projectstring4",];
return Works;
})
function LatestProjectCtrl($scope,Works){
$scope.works = Works;
}
解决方法
您可以显示一条消息,表示没有这样的结果：
<span ng-show="(projects | filter:query).length == 0">No results</span>
有关完整的示例,请参阅下面的代码片段：
function Ctrl($scope) {
$scope.projects = [
{
name: "Sunny project 1",date: "17.3.2016",image: "pr1"
},{
name: "Windy project 2",date: "18.03.2016",image: "pr2"
},{
name: "Cloudy project 3",date: "19.03.2016",image: "pr3"
}
]
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="Ctrl">
<input type="text" ng-model="query" />
<div class="portfolio-thumb" ng-repeat="project in projects | filter:query">
<h4>{{project.name}}</h4>
<ul>
<li>{{project.date}}</li>
<li>Img source = '{{project.image}}.jpg'</li>
</ul>
</div>
<div ng-show="(projects | filter:query).length == 0">No results</div>
</div>
</div>
