AngularJS - 필터의 빈 결과에 대한 자리 표시자

AngularJS - 필터의 빈 결과에 대한 자리 표시자

플레이스 홀더를 갖고 싶다.<No result>필터 결과가 빈 상태로 반환되는 경우.누구 좀 도와주실래요?어디서부터 시작해야 할지...

HTML:

<div ng-controller="Ctrl">
<h1>My Foo</h1>
<ul>
    <li ng-repeat="foo in foos">
        <a href="#" ng-click="setBarFilter(foo.name)">{{foo.name}}</a>
    </li>
</ul>
<br />
<h1>My Bar</h1>
<ul>
    <li ng-repeat="bar in bars | filter:barFilter">{{bar.name}}</li>
</ul>

</div>

JS:

function Ctrl($scope) {

  $scope.foos = [{
    name: 'Foo 1'
  },{
    name: 'Foo 2'
  },{
    name: 'Foo 3'
  }];

  $scope.bars = [{
    name: 'Bar 1',
    foo: 'Foo 1'
  },{
    name: 'Bar 2',
    foo: 'Foo 2'
  }];

  $scope.setBarFilter = function(foo_name) {
    $scope.barFilter = {};
    $scope.barFilter.foo = foo_name;
  }
}

jsFiddle : http://jsfiddle.net/adrn/PEumV/1/

감사합니다!

필터를 1회만 지정하면 되는 접근방식의 변경.

  <li ng-repeat="bar in filteredBars = (bars | filter:barFilter)">{{bar.name}}</li>
</ul>
<p ng-hide="filteredBars.length">Nothing here!</p>

만지작거리다

여기 ng-show를 사용한 요령이 있습니다.

HTML:

<div ng-controller="Ctrl">
<h1>My Foo</h1>
<ul>
    <li ng-repeat="foo in foos">
        <a href="#" ng-click="setBarFilter(foo.name)">{{foo.name}}</a>
    </li>
</ul>
<br />
<h1>My Bar</h1>
<ul>
    <li ng-repeat="bar in bars | filter:barFilter">{{bar.name}}</li>
</ul>
<p ng-show="(bars | filter:barFilter).length == 0">Nothing here!</p>

</div>

jsFiddle: http://jsfiddle.net/adrn/PEumV/2/

이 공식 문서에서 이 방법을 인용하면 다음과 같습니다.

ng-repeat="friend in friends | filter:q as results"

그런 다음 결과를 배열로 사용합니다.

<li class="animate-repeat" ng-if="results.length == 0">
  <strong>No results found...</strong>
</li>

전체 스니펫:

<div ng-controller="repeatController">
I have {{friends.length}} friends. They are:
<input type="search" ng-model="q" placeholder="filter friends..." aria-label="filter friends" />


<ul class="example-animate-container">
    <li class="animate-repeat" ng-repeat="friend in friends | filter:q as results">
      [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
    </li>
    <li class="animate-repeat" ng-if="results.length == 0">
      <strong>No results found...</strong>
    </li>
  </ul>
</div>

언급URL : https://stackoverflow.com/questions/14615495/angularjs-placeholder-for-empty-result-from-filter