Question

我正在使用angularjs v 1.2。

我的HTML代码：

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

我的控制器代码：

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();

我的JSON数据是：

$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
            }
        ];

我希望像这样明智地展示我的活动：

2月至3月初春

本赛季的所有活动

4月下旬 - 可能

本赛季的所有活动

我如何实现它？我是否在控制器中创建自定义过滤器或添加更多逻辑？

还有没有办法迭代ng-repeat并显示其键一次和值（数组）取决于它的长度？

Answer 1

请参见此处：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>

根据angularjs ng-repeat中的一个属性过滤数组对象

1 个答案: