Filter array object based on one of its properties in angularjs ng-repeat

Question

I am using angularjs v 1.2.

My HTML code:

<div ng-repeat="activity in currentActivitiesList" >
            <h3 style="color: green;" align="center"><bold>{{activity.seasonName}}</bold></h3><hr />    
            <div class="col-xs-4">
                <img src="images/image1.png" />
            </div>
            <div class="col-xs-8">
                <p>{{activity.activityName}}</p>      
                <p>{{activity.date}}</p>   
                <p style="color: orange;">Status: {{activity.status}}</p>
            </div>
            <div style="clear:both;"></div>
            <hr />  

        </div>

My controller code:

var filterActivities = function(){
  angular.forEach($scope.activitiesList, function(value, key) {
  //console.log("key -->" + key + "and value --> " + value.date);
  var splitDate = value.date.split('-');

  if(splitDate[0] == $scope.currentNavYear){
    if(value.seasonCode == 1){
      value.seasonName = "Early Spring February - March";
    }
    if(value.seasonCode == 2){
      value.seasonName = "Late Spring April -May";
    }
    if(value.seasonCode == 3){
      value.seasonName = "Rest of the year!";
    }
    $scope.currentActivitiesList.push(value);
    };
  });
}

filterActivities();

My JSON data is:

$scope.activitiesList = [
            {
                "activityName":"Activity 1",
                "regionCode":"N",
                "date":"2014-04-15",
                "status": "Scheduled",
                "seasonCode":1
            },
            {
                "activityName":"Activity 2",
                "regionCode":"N",
                "date":"2014-04-15",
                "status": "Completed",
                "seasonCode":1
            },
            {
                "activityName":"Activity 3",
                "regionCode":"N",
                "date":"2014-04-15",
                "status": "Completed",
                "seasonCode":2
            },
            {
                "activityName":"Activity 4",
                "regionCode":"N",
                "date":"2014-04-15",
                "status": "Completed",
                "seasonCode":3
            },
            {
                "activityName":"Activity 3",
                "regionCode":"N",
                "date":"2013-04-15",
                "status": "Scheduled",
                "seasonCode":3
            }
        ];

I want to display my activities season wise like this:

Early Spring February - March

All activities in this season

Late Spring April -May

All activities in this season

How do i achieve it? Do i create a custom filter or add some more logic in my controller?

Also is there any way to iterate ng-repeat and display its key once and the value (array) depending on its length?

Answer 1

please see here: http://jsbin.com/hucir/1/

  $scope.sesons = [
    {"seasonCode":1, "name":"Early Spring February - March"},
    {"seasonCode":2, "name":"Late Spring April -May"},
    {"seasonCode":3, "name":"Summer June - August"},

  ];

html:

<div ng-repeat="seson in sesons" >
    <h3>{{seson.name}}</h3>
     <div ng-repeat="activity in currentActivitiesList | filter:{seasonCode : seson.seasonCode}   " >



        <h3 style="color: green;" align="center"><bold>{{activity.seasonName}}</bold></h3><hr />    
        <div class="col-xs-4">
            <img src="images/image1.png" />
        </div>
        <div class="col-xs-8">
            <p>{{activity.activityName}}</p>      
            <p>{{activity.date}}</p>   
            <p style="color: orange;">Status: {{activity.status}}</p>
        </div>
        <div style="clear:both;"></div>

</div>