I have integrated AngularJS into the RoR framework and am working on creating a multi-filter for the "ng-repeat" function to filter JSON data based on "month_id" and "year_id".
Here is the current code:
JSON:
[
{ "date":"October 4, 2015",
"month_id":"10",
"year_id":"2015",
"name":"Chris",
"title":"Painter",
"company":"Freelancer",
"description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit." },
{ "date":"October 3, 2015",
"month_id":"10",
"year_id":"2015",
"name":"Rebecca",
"title":"Writer",
"company":"John H. Hickenloop",
"description":"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium." },
{ "date":"October 22, 2014",
"month_id":"10",
"year_id":"2014",
"name":"Josh",
"title":"Riddler",
"company":"Florida Museum",
"description":"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi." }
]
Controller:
var myApp = angular.module('myApp', []);
myApp.controller("MyController", function MyController($scope, $http){
$http.get("/assets/data.json").success(function(data){
$scope.artists = data;
String.prototype.trunc = String.prototype.trunc ||
function(n){
return this.length >n ? this.substr(0,n-1)+'...' : this;
};
$scope.myFilter = function(){
var currentDate = new Date;
return year_id === currentDate.getFullYear() && month_id === (currentDate.getMonth() + 1);
};
});
});
HTML:
<div ng-controller="MyController">
<ul>
<li ng-repeat="item in artists | filter: myFilter">
<h1>{{item.date}}</h1>
<p>{{ item.description.trunc(100) }}</p>
</li>
</ul>
</div>