Question

我有一个用户对象和一系列事件：

$scope.user = {
  userId: 2,
  userName: jdoe,
  eventIds: [23,34,45]
}

$scope.events = [
  {eventId: 23, eventName:"bar"},
  {eventId: 34, eventName:"baz"},
  {eventId: 45, eventName:"qux"}
  {eventId: 56, eventName:"..."},
]

显示用户详细信息时，我想列出所有事件。我可以轻松地显示eventIds：

<span ng-repeat="eventId in user.eventIds">{{eventId}}</span>

我想按名字显示事件。我已经设法在下划线的帮助下找到了解决方案：

<span ng-repeat="eventId in user.eventIds">{{getEventName(eventId)}}</span>

$scope.getEventName = function (eventId) {
  return _.findWhere($scope.events, { eventId: eventId }).eventName;
}

虽然这很有效，但看起来很麻烦，特别是当我发现自己一遍又一遍地重复这些不同的对象时，我想也会有重大的性能影响。

是否有更好的“角度方式”来帮助我解决事件名称？

Answer 1

与John Munsch所说的类似，您可以事先创建事件的“地图”，这样您就不必继续调用函数来获取事件名称。 Underscore甚至提供了一个易于操作的功能。

控制器中的

$scope.eventsById = _.indexBy($scope.events, "eventId");

你的HTML中的

<span ng-repeat="eventId in user.eventIds">{{ eventsById[eventId].eventName }}</span>

我更喜欢这个方法的是你只需要遍历你的事件数组一次，John的答案将在user.eventIds中每次更改一个循环，你当前的解决方案为{的每一个输出做一个循环{1}}

Answer 2

没有什么我能想到的AngularJS会让那更好。但我可以说，做这样的事情可能更为理想：

<span ng-repeat="event in mappedEvents(user.eventIds)">{{event.eventName}}</span>

$scope.mappedEvents = function (eventArray) {
  // Map the array of IDs to actual event objects and return an array of those event objects.
}

由于您只对整个事件阵列执行一次映射，因此可能会获得更好的结果。您可以使用排序或其他方法来加快速度。

Answer 3

您可以向引用events数组中事件的用户对象添加一个事件数组：

$scope.user.events = _.map($scope.user.eventIds, function(eventId){
    return _.findWhere($scope.events, {eventId: eventId});
});

然后在视图中迭代这些事件：

<span ng-repeat="event in user.events">{{event.eventName}}</span>

Fiddle

angularJS可以将对象映射到ID吗？

3 个答案: