javascript - 如何在 AngularJS 中循环数组并将值放入唯一标签中

Question

问题

<小时/>

我正在尝试向用户显示他们接下来的 4 个事件。到目前为止，我已在数组上使用 splice 来选择前 4 个对象。所以现在我有了这些对象，我需要能够循环遍历数组并显示正确的数据。

所有标签都是唯一的，并且具有不同的名称。

我不知道我这样做是否正确。这对我来说是一个学习项目。

代码

<小时/>

我的 4 个事件的 ASP.NET 代码如下所示:

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

正如您所看到的，第一行表示下一个事件还有 10 天，在其下方您可以看到它是假期。如果您继续查找，此信息有 4 个不同的标签。

Controller 代码:

function GetNext4UserEvents() {

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

}

我并没有对此添加太多内容，因为我只是想不出最好的方法。正如你所看到的，我得到了前 4 个对象。

该对象看起来像这样:

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

Answer 1

我希望我没有完全误解你的问题，但这里有一个输出你的事件的尝试。也许这并不完全是您想要的，但希望它可以作为一个起点。我创建了一个jsFiddle您可以在其中修改代码。

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"
    } ];
  });