如何在angularjs中過濾json數組？

我有兩個$的範圍值是一個數組，另一種是JSON數組如何在angularjs中過濾json數組？

$scope.extensions = ["jpg", "xlsx", "pdf", "docx", "mp4"] 

$scope.files ={'exten':"jpg","Value":""filepath/data1.jpg"},{'exten':"pdf","Value":""filepath/data2.pdf"},{'exten':"mp4","Value":""filepath/data3.mp4"},{'exten':"jpg","Value":""filepath/data4.jpg"}

，如果我在JPG中單擊它應該只顯示data1.jpg和data4.jpg

這裏是我的前端

<div style="padding-left: 100px;margin-top: 50px;"> 
       <div style="border: 1px solid cornflowerblue; width: 100px; height: 100px;float:left;margin-left: 50px;" ng-repeat="element in extensions"> 
        <button ng-click="showFile(element)">{{element}}</button> 
       </div>   
      </div> 
     <br/> 


<div style="border: 1px solid cornflowerblue; width: 900px; height: 300px;margin-left: 50px;margin-top:100px;" ng-repeat="element in extensions" ng-show="clickFile==element"> 
       {{element}} 
     </div>

來源

2016-04-26 Athi

的可能的複製[如何篩選與AngularJs JSON數據]（http://stackoverflow.com/questions/21273562/how-to-filter-json-data-with- angularjs） –

var app = angular.module("testApp", []); 
 
app.controller('testCtrl', function($scope){ 
 
    $scope.extensions = ["jpg", "xlsx", "pdf", "docx", "mp4"]; 
 

 
$scope.files =[{'exten':"jpg","Value":"filepath/data1.jpg"},{'exten':"pdf","Value":"filepath/data2.pdf"},{'exten':"mp4","Value":"filepath/data3.mp4"},{'exten':"jpg","Value":"filepath/data4.jpg"}]; 
 
    
 
    
 
    $scope.showFile = function(element){ 
 
    
 
    $scope.clickFile = element; 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="testApp" ng-controller="testCtrl"> 
 

 
<div style="padding-left: 100px;margin-top: 50px;"> 
 
       <div style="border: 1px solid cornflowerblue; width: 100px; height: 100px;float:left;margin-left: 50px;" ng-repeat="element in extensions"> 
 
        <button ng-click="showFile(element)">{{element}}</button> 
 
       </div>   
 
      </div> 
 
     <br/>{{clickFile}} 
 
    
 
    <div style="border: 1px solid cornflowerblue; width: 900px; height: 300px;margin-left: 50px;margin-top:100px;" ng-repeat="file in files | filter:{exten:clickFile}"> 
 
       {{file.Value}} 
 
     </div> 
 

 
</div>

代碼

試試這個

ng-repeat="file in files | filter:{exten:clickFile}"

來源

2016-04-26 06:25:13

謝謝你的工作就像魅力:-) – Athi

你有多個解決方案，如創建（通過擴展例如過濾器），對應你的情況你自己的過濾器

但關於你的榜樣，你也可以設置一個currentFilterValue，並將其直接應用於ng-repeat。

例如：

showFile = function(element){ 
    /*...*/ 
    this.myFilterValue = element; 
} 


<div style="padding-left: 100px;margin-top: 50px;"> 
    <div style="border: 1px solid cornflowerblue; width: 100px; height: 100px;float:left;margin-left: 50px;" ng-repeat="element in extensions | filter:myFilterValue"> 
    <button ng-click="showFile(element)">{{element}}</button> 
    </div> 
</div> 
<br/>

來源

2016-04-26 06:28:08 mfrachet

如何在angularjs中過濾json數組？

回答

相關問題