angularjsでjson配列をフィルタリングする方法は？

Question

私は2つの$スコープを持っては、1つの配列で、もう一つは、私はJPGボックスをクリックした場合にのみdata1.jpgとdata4.jpg

を示すべきである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"} 

ある値

ここでフロントエンド

<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に直接適用します。例えば

：[AngularJsでJSONデータをフィルタリングする方法]の

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