Как фильтровать json-массив в angularjs?

Question

У меня есть два $ рамки значений один массив, а другой является массив 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> 

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>

попробовать это

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

Answer 2

Вы несколько решений, как создать свой собственный фильтр, соответствующий ваш случай (фильтр расширения, например)

Но что касается вашего примера, вы можете также установить 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/>