angularJS - キーでJSONをフィルタリングする

Question

私は選択オプション値でフィルタリングするJSONデータセットを持っています。選択肢をモデルにバインドしましたが、フィルタが機能しなくなりました。私は間違って何をしていますか？

私の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> 

私のコントローラ：

.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

$scope.ENが配列でないので、あなたが定期的にfilterを使用することはできません。あなたは代わりにng-ifを使用することもできます。

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

あなたがfilterを好む場合 - 配列にすることや、カスタムフィルタを使用するようにデータを変更します。

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

myFilterをこのように定義されて

：

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