javascript - 如何检测 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>