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

Question

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

0

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

если я нажму на jpg box, он должен показать только 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>

Athi 26 апр. 2016, в 09:03

Источник

0

Возможная копия Как отфильтровать данные JSON с AngularJs
Jake Chasan 26 апр. 2016, в 06:27

Теги:

html

angularjs

2 ответа

0

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

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

mfrachet 26 апр. 2016, в 04:22

Ещё вопросы

Возможная копия Как отфильтровать данные JSON с AngularJs

Hadi J · Accepted Answer · 2016-04-26T04-40-00.000Z

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