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

how to loop through an array and put values in unique labels in AngularJS

本文关键字：AngularJS 标签 唯一 何遍历 遍历 数组      更新时间：2023-09-26

Issue

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

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

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

法典

我的 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 个不同的标签。

控制器代码：

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"
我希望

我没有完全误解你的问题，但这里有一个输出你的事件的尝试。也许这不是你所追求的，但希望它可以作为一个起点。我创建了一个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"
    } ];
  });
相关文章：