如何检测Angular ng-repeat是否显示结果

Question

我只是想在搜索字段中键入内容并且没有匹配时显示"无结果"消息.目前过滤器有效但当我键入一个没有给出结果的关键字时,它不会显示"无结果"消息.怎么做？

<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"
    },
    {
        name : "project3",
        string : "projectstring4",
        date: "17 August 2012"
    },
];  
return Works;
})



function LatestProjectCtrl($scope, Works){
$scope.works = Works;
}

Answer 1

您可以显示一条消息,说明没有这样的结果:

<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>