angularJS - Filtern von JSON mit Schlüssel

Question

Ich habe einen JSON-Datensatz, den ich nach einem ausgewählten Optionswert filtern möchte. Ich habe die Auswahl an ein ng-Modell gebunden, aber jetzt kann ich den Filter nicht mehr zum Laufen bringen. Was mache ich falsch?

Mein html:

<div class="row portfolio" ng-controller="portfolioController"> 
    <div class="small-12 portfolioFilterContainer"> 
     <label class="portfolioFilterLabel">Filter: 
      <select class="portfolioFilterSelect" ng-model="portfolioFilter"> 
       <option value="all">All</option> 
       <option value="gitHub">Has repository</option> 
       <option value="hasDemo">Has a working demo</option> 
       <option value="finished">Finished</option> 
      </select> 
     </label> 
    </div> 
    <div class="small-12"> 
     <div class="row siteContainer" ng-repeat="site in EN | filter: portfolioFilter"> 
      <div class="small-4 columns"> 
       <img ng-if="site.left" class="portfolioSiteImage" ng-src="{{site.img}}"> 
      </div> 
      <div class="small-8 columns"> 
       <h1 class="portoflioSiteHeading"><a href="#">{{site.heading}}</a></h1> 
       <p class="portfolioSiteParagraph">{{site.desc}}</p> 
      </div> 
      <div class="small-4 columns"> 
       <img ng-if="!site.left" class="portfolioSiteImage" ng-src="{{site.img}}"> 
      </div> 
     </div> 
    </div> 
</div> 

mein Controller:

.controller('portfolioController', ['$scope', function($scope) { 
     $scope.portfolioFilter = 'all'; 
     $scope.EN = { 
      w1: { 
       img: "http://lorempixel.com/400/400", 
       heading: "mySite", 
       desc: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus eum itaque, ex. Nisi rem est voluptas, nobis, a dolorum harum error architecto recusandae omnis, possimus quasi deserunt pariatur commodi assumenda.", 
       left: true, 
       gitHub: false, 
       hasDemo: false, 
       finished: false, 
       all: true 
      }, 
      w2: { 
       img: "http://lorempixel.com/400/400", 
       heading: "mySite", 
       desc: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus eum itaque, ex. Nisi rem est voluptas, nobis, a dolorum harum error architecto recusandae omnis, possimus quasi deserunt pariatur commodi assumenda.", 
       left: false, 
       gitHub: false, 
       hasDemo: false, 
       finished: false, 
       all: true 
      }, 
      w3: { 
       img: "http://lorempixel.com/400/400", 
       heading: "mySite", 
       desc: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus eum itaque, ex. Nisi rem est voluptas, nobis, a dolorum harum error architecto recusandae omnis, possimus quasi deserunt pariatur commodi assumenda.", 
       left: true, 
       gitHub: false, 
       hasDemo: false, 
       finished: false, 
       all: true 
      }, 
      w4: { 
       img: "http://lorempixel.com/400/400", 
       heading: "mySite", 
       desc: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus eum itaque, ex. Nisi rem est voluptas, nobis, a dolorum harum error architecto recusandae omnis, possimus quasi deserunt pariatur commodi assumenda.", 
       left: false, 
       gitHub: false, 
       hasDemo: false, 
       finished: false, 
       all: true 
      } 
     }; 
    }]); 

Answer 1

Sie können nicht die reguläre filter seit $scope.EN verwenden ist kein Array. Sie könnten ng-if statt:

ng-repeat="site in EN" ng-if="site[portfolioFilter]" 

Wenn Sie filter bevorzugen - die Daten ändern, ein Array sein und benutzerdefinierte Filter verwenden:

ng-repeat="site in sites | filter: myFilter" 

wo myFilter auf diese Weise definiert ist:

$scope.myFilter = function(val) { 
    return val[$scope.portfolioFilter]; 
}