Wie filtert man ein JSON-Array in angularjs?

Question

ich zwei $ Umfang haben Werte ist Array und das andere ist json Array

$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"} 

, wenn ich auf jpg Box klicken, um es nur data1.jpg und data4.jpg

zeigen sollte

hier ist mein Code für das vordere Ende

<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> 

Answer 1

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>

versuchen, diese

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

Answer 2

Sie haben mehrere Lösungen, wie Sie Ihre eigenen Filter zu schaffen, Ihren Fall (Filter durch die Erweiterung zum Beispiel) entspricht

Aber zu Ihrem Beispiel können Sie auch eine Reihe currentFilterValue und wendet es direkt auf die ng-Wiederholung an.

Zum Beispiel:

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/>