根據數字條件篩選ng-repeat項目

嘗試使用選擇菜單基於大於/小於條件篩選項目。根據數字條件篩選ng-repeat項目

HTML：

 <select name="likes-filter" id="likes-filter" class="form-control" data-ng-model="filterValue"> 
      <option value="0">0</option> 
      <option value="10">&gt; 10</option> 
      <option value="20">&gt; 20</option> 
      <option value="50">&gt; 50</option> 
      <option value="100">&gt; 100</option> 
      <option value="500">&gt; 500</option> 
      <option value="1000">&gt; 1000</option> 
     </select> 

    <div class="image-container" data-ng-repeat="image in images | filter: filterValue | orderBy: dateSubmitted"> 

     <div class="like-wrapper"> 
      <i class="glyphicon glyphicon-heart"></i> 
      <p>{{image.likes}}</p> 
     </div> 

     <p class="date">{{image.dateSubmitted | date: 'medium'}}</p> 

     <img data-ng-src="{{image.path}}" alt="Image"> 
     <span class="btn" data-ng-click="confirmImageDelete(image)">&times;</span> 
    </div>

JS：

$scope.images = [ 
    { 
     dateSubmitted: new Date(), 
     path: "/images/profile-placeholder-250x250.gif", 
     likes: 5 
    }, 
    { 
     dateSubmitted: new Date(), 
     path: "/images/profile-placeholder-250x250.gif", 
     likes: 9 
    }];

所以我想選擇菜單過濾圖像地重複基於不是像數更大。

因此，像<option value="likes > 10">> 10</option>這樣的東西會篩選我的ng重複，並只顯示大於10像計數的圖像。

任何人都可以指向正確的方向嗎？

來源

2014-10-01 Christopher Marshall

您可以使用一種功能來過濾圖像。試試這個片斷：

angular.module('MyApp', []) 
 
.controller('MyController', ['$scope', function($scope) { 
 
    $scope.filterValue = 10; 
 
    $scope.images = [ 
 
    { 
 
     dateSubmitted: new Date(), 
 
     path: "http://www.blinkawards.com/Images/profilePhoto.gif", 
 
     likes: 5 
 
    }, 
 
    { 
 
     dateSubmitted: new Date(), 
 
     path: "http://www.blinkawards.com/Images/profilePhoto.gif", 
 
     likes: 9 
 
    }, 
 
    { 
 
     dateSubmitted: new Date(), 
 
     path: "http://www.blinkawards.com/Images/profilePhoto.gif", 
 
     likes: 90 
 
    }, 
 
    { 
 
     dateSubmitted: new Date(), 
 
     path: "http://www.blinkawards.com/Images/profilePhoto.gif", 
 
     likes: 190 
 
    }, 
 
    { 
 
     dateSubmitted: new Date(), 
 
     path: "http://www.blinkawards.com/Images/profilePhoto.gif", 
 
     likes: 1009 
 
    }]; 
 
    
 
    $scope.filterByLikes = function(image) { 
 
     return image.likes > parseInt($scope.filterValue); 
 
    } 
 
}])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="MyApp"> 
 
    <div ng-controller="MyController"> 
 
<select name="likes-filter" id="likes-filter" class="form-control" data-ng-model="filterValue"> 
 
      <option value="0">0</option> 
 
      <option value="10">&gt; 10</option> 
 
      <option value="20">&gt; 20</option> 
 
      <option value="50">&gt; 50</option> 
 
      <option value="100">&gt; 100</option> 
 
      <option value="500">&gt; 500</option> 
 
      <option value="1000">&gt; 1000</option> 
 
     </select> 
 

 
    <div class="image-container" data-ng-repeat="image in images | filter: filterByLikes | orderBy: dateSubmitted"> 
 

 
     <div class="like-wrapper"> 
 
      <i class="glyphicon glyphicon-heart"></i> 
 
      <p>{{image.likes}}</p> 
 
     </div> 
 

 
     <p class="date">{{image.dateSubmitted | date: 'medium'}}</p> 
 

 
     <img data-ng-src="{{image.path}}" alt="Image" width="30px"> 
 
     <span class="btn" data-ng-click="confirmImageDelete(image)">&times;</span> 
 
    </div> 
 
     </div> 
 
    </body>

來源

2014-10-01 19:25:44

謝謝！我覺得我比這樣做更難。 – 2014-10-01 19:33:42

根據數字條件篩選ng-repeat項目

回答

相關問題