如何遍历数组并将值放在AngularJS中的唯一标签中

Question

Issue

---

I am trying to display to the user the next 4 events they have got. So far I have used splice on the array to select the first 4 objects . So now I have these objects I need to be able to loop through the array and display the correct data.

All the labels are unique and will have different names.

I don't know if the way i am doing this is the correct way. This is a learning project for me.

Code

---

My ASP.NET code for the 4 events looks like this:

<div class="row" style="padding-top: 10px; padding-bottom: 10px; border: 1px solid #ddd; border-radius: 2px; margin-top: 25px; border-left: 4px solid #21cd25; font-size: 12px;">
    <div class="col-lg-12">
        <span class="glyphicon glyphicon-ok" style="color: #21cd25; padding-right: 10px;"></span>
        <span style="font-weight: 500;">10 Days - </span>
        <span>Holiday</span>
    </div>
</div>
<div class="row" style="padding-top: 10px; padding-bottom: 10px; border: 1px solid #ddd; border-radius: 2px; margin-top: 5px; border-left: 4px solid #f6bb42; font-size: 12px;">
    <div class="col-lg-12">
        <span class="glyphicon glyphicon-question-sign" style="color: #f6bb42; padding-right: 10px;"></span>
        <span style="font-weight: 500;">3 Weeks - </span>
        <span>Paternity</span>
    </div>
</div>
<div class="row" style="padding-top: 10px; padding-bottom: 10px; border: 1px solid #ddd; border-radius: 2px; margin-top: 5px; border-left: 4px solid #cd2121; font-size: 12px;">
    <div class="col-lg-12">
        <span class="glyphicon glyphicon-remove" style="color: #cd2121; padding-right: 10px;"></span>
        <span style="font-weight: 500;">1 Week - </span>
        <span>Holiday</span>
    </div>
</div>
<div class="row" style="padding-top: 10px; padding-bottom: 10px; border: 1px solid #ddd; border-radius: 2px; margin-top: 5px; border-left: 4px solid #21cd25; font-size: 12px;">
    <div class="col-lg-12">
        <span class="glyphicon glyphicon-ok" style="color: #21cd25; padding-right: 10px;"></span>
        <span style="font-weight: 500;">1 Day - </span>
        <span>Bank Holiday</span>
    </div>
</div>

As you can see the first row says the next event is 10 Days - away and below that you can see it is a Holiday . If you keep looking through there are 4 different labels for this information.

Controller code:

function GetNext4UserEvents() {

    var top4 = _allUserEvents.splice(0, 4);

}

I have not really added much to this as i just can't think of the best way to do it. As you can see though i am getting the top 4 objects.

The object looks like this:

0: Object
    color: "#cc0000"
    end: "2016-02-20"
    id: 6
    start: "2016-02-10"
    title: "Test2"

Answer 1

I hope that I haven't completely misunderstood your question, but here's a stab at outputting your events. Maybe it's not exactly what you were after, but hopefully it can serve as a starting point. I've created a jsFiddle where you can mess around with the code.

HTML:

<div ng-app="app">
  <div ng-controller="ctrl">
    <div class="row" style="padding-top: 10px; padding-bottom: 10px; border: 1px solid #ddd; border-radius: 2px; margin-top: 25px; border-left: 4px solid #21cd25; font-size: 12px;" ng-repeat="event in sampleEvents">
      <div class="col-lg-12">
        <span class="glyphicon {{event.color | findIcon}}" ng-style="{'color': event.color, 'padding-right': '10px'}"></span>
        <span style="font-weight: 500;">{{event.start | daysOut}} - </span>
        <span>{{event.title}}</span>
      </div>
    </div>
  </div>
</div>

JS:

angular.module("app", ["angularMoment"])
  .filter("daysOut", function(moment) {
    return function(input) {
      return moment.duration(moment(input) - moment()).humanize();
    };
  })
  .filter("findIcon", function() {
    return function(input) {
      switch (input) {
        case "#cc0000":
          return "glyphicon-remove";
          break;
        case "#008000":
          return "glyphicon-ok";
          break;
        case "#ffa500":
          return "glyphicon-question-sign";
          break;
      }
      return "glyphicon-ok";
    }
  })
  .controller("ctrl", function($scope) {
    $scope.sampleEvents = [{
      color: "#cc0000",
      end: "2016-04-01",
      id: 1,
      start: "2016-03-19",
      title: "Event 1"
    }, {
      color: "#008000",
      end: "2016-04-03",
      id: 2,
      start: "2016-03-22",
      title: "Event 2"
    }, {
      color: "#ffa500",
      end: "2016-04-15",
      id: 3,
      start: "2016-04-02",
      title: "Event 3"
    }, {
      color: "#008000",
      end: "2016-04-14",
      id: 4,
      start: "2016-03-13",
      title: "Event 4"
    } ];
  });