Angular js - ng-repeat이 비어 있는 경우 메시지 표시

Angular js - ng-repeat이 비어 있는 경우 메시지 표시

다음 각도JS 어플리케이션은 ng-repeat 및 적용된 필터로 동작하고 있습니다.적용된 특정 필터는 값을 남기지 않습니다.알림을 표시하려면 어떻게 해야 합니까?

만지작거리다

HTML

<div >
<div data-ng-controller="myCtrl">


    <ul >
        <li data-ng-repeat="item in values | filter:filterIds()"> 
            <code>#{{item.id}}</code> Item
        </li>
    </ul>

    <p ng-show="!values.length">no vals with this filter</p>
    <button ng-click="loadNewFilter()"> filter now</button>
</div>


</div>

각도 JS

var app = angular.module('m', []);

app.controller('myCtrl', function ($scope) {
$scope.values = [{
    id: 1
}, ....
}];

$scope.filter = [1,2,3,4,5,6];

$scope.filterIds = function (ids) {
        return function (item) {
            var filter = $scope.filter;

                 return filter.indexOf(item.id) !== -1;         
        }
 }

$scope.loadNewFilter = function (){
    $scope.filter = [-1];
    $scope.$apply();
}

});

이게 네가 원하는 거야

var app = angular.module('myApp', []);    
app.controller('myCtrl', function ($scope) {
  $scope.values = [
    {id: 1}, 
    {id: 2}, 
    {id: 3}, 
    {id: 4}, 
    {id: 5}, 
    {id: 6}];
    
  $scope.filter = [1,2,3,4,5,6];
        
  $scope.filterIds = function (ids) {
    return function (item) {
      var filter = $scope.filter; 
      return filter.indexOf(item.id) !== -1;       	
    }
  }
        
  $scope.loadNewFilter = function (){
    $scope.filter = [1,5];    
  }                 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div data-ng-controller="myCtrl">               
    <ul>
      <li data-ng-repeat="item in testValue=(values | filter:filterIds())"> 
        <code>#{{item.id}}</code> Item
      </li>
    </ul>           
    <p ng-show="!testValue.length">no vals with this filter</p>
    <button ng-click="loadNewFilter()"> filter now</button>
  </div>
</div>

바이올린 링크

이것도 Another One FILED LINK 체크입니다.

매우 심플한 CSS 접근방식을 채택합니다.

HTML:

<ul>
    <li data-ng-repeat="item in values | filter:filterIds()"> <code>#{{item.id}}</code> Item</li>
    <li class="no-items">There are no matching items.</li>
</ul>

CSS:

li + .no-items {
    display: none;
}

그러니까 기본적으로는li.no-items다른 것이 없는 경우에만 볼 수 있습니다.LI를 참조해 주세요.이게 퍼포먼스에 더 좋은 것 같아요.워커를 한 명 더 소개하는 것보다ngShow/ngHide.

데모: http://jsfiddle.net/z9daLbLm/5/

다음은 작업 예시를 제시하겠습니다.http://jsfiddle.net/z9daLbLm/2/

필터 결과를 에 저장할 수 있습니다.ng-repeat

<div ng-repeat="item in filteredValues = (values | filter:filterIds())">{{item}}</div>

결과는 다음 위치에 저장됩니다.filteredValues그런 다음 이 필터링된 값을 DOM에서 사용합니다.

<div ng-show="!filteredValues.length">No Items</div>

http://jsfiddle.net/ntofav3c/ 를 참조해 주세요.

변경:

<p ng-show="!values.length">no vals with this filter</p>

대상:

 <p ng-hide="values | filter:filterIds()">no vals with this filter</p>

다음 작업 jsfiddle을 참조하십시오.http://jsfiddle.net/z9daLbLm/4/ 이 코드를 추가한 후<ul>목록.

<div ng-if="(values|filter:filterIds()).length == 0">
    List is empty
</div>

필터링된 값 길이가 0인 경우 "목록이 비어 있습니다" 텍스트만 표시됩니다.

상세한 것에 대하여는, 다음의 링크를 참조해 주세요.필터링된 ng 반복 데이터의 길이를 표시하는 방법

저도 최근에 같은 문제에 직면했습니다.ng-repeat에 3개의 필터와 1개의 orderBy가 있어서 몇 가지 emptyList Messages를 보여주고 싶었는데...
위의 솔루션은 동작하지 않았습니다.그래서 제가 직접 만들었어요.

• 빈 msg를 background div로, main Container를 top div로 설정.
• emptyMsg div는 항상 표시되므로 목록에 값이 없을 때마다 항상 표시됩니다.emptyMsg만이 표시됩니다.PS: 코드 스니펫이 실행되지 않습니다.추가 라이브러리가 추가되지 않았기 때문입니다.이건 단지 너에게 아이디어를 주기 위한 거야!

  //empty msg....
  .emptyMsg{
      position: absolute;
      left: 0;right: 0;
      margin: auto;
      color: gray;
      text-align: center;
      font-size:3.0em;
      z-index: 0;
  }
  .activityItem {
      margin: 0px !important;
      padding: 0px !important;
      border: 0px !important;
  }
  .mainContainer {
      z-index: 999;
      width: 100%;
      height: 40px;
      left: 0px;
      margin-top: 10px;
      display: inline-block;
  }

  <h4>List of Activities</h4>
          <ion-list>
             <div class="emptyMsg">No Activities found!</div>
              <div class="item activityItem" ng-repeat="activity in activities | orderBy:field1Order:order.reverse1 | filter:importanceFilter | filter:motiveFilter track by $index">
                     <div class="mainContainer">
  
                              <div class="divBar">{{activity.energy}}%</div>
                     
                  </div>
              </div>
              
          </ion-list>

이를 수행하려면 ng-switch를 사용합니다.

예를 들어 다음과 같습니다.

`    <div ng-app ng-controller="friendsCtrl">
    <label>Search: </label><input ng-model="searchText" type="text">
    <div ng-init="filtered = (friends | filter:searchText)">
    <h3>'Found '{{(friends | filter:searchText).length}} friends</h3>
    <div ng-switch="(friends | filter:searchText).length">
      <span class="ng-empty" ng-switch-when="0">No friends</span>
      <table ng-switch-default>
        <thead>
          <tr>
            <th>Name</th>
            <th>Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="friend in friends | filter:searchText">
            <td>{{friend.name}}</td>
            <td>{{friend.phone}}</td>
          </tr>
        </tbody>
      </table>
     </div>`

언급URL : https://stackoverflow.com/questions/25866121/angular-js-show-message-if-ng-repeat-is-empty