如何在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数组？

回答

相关问题