调整 ng-repeat 以匹配对象结构答案

【问题标题】：Adjust ng-repeat to match object structure调整 ng-repeat 以匹配对象结构
【发布时间】：2026-02-03 18:35:01
【问题描述】：

我有一个看起来像这样的对象：

 $scope.hobbies = {
    list: [
      {
        "PersonId": 23,
        "PersonName": "John Smith",
        "Hobbies": [
          {
            "HobbyTitle": "Paragliding",
            "HobbyId": 23
          },
          {
            "HobbyTitle": "Sharking",
            "HobbyId": 99
          }
        ]
      }             
    ]
   };

我正在尝试开发一种视图，允许用户选择每个人的爱好。

我有一个笨蛋here

我的问题是所有选定的爱好都显示在每个人的下面。这是因为我只是将所有选定的爱好推送到 selectedHobbies 数组。

  $scope.addHobbyItem = function (item) {
    var index = $scope.selectedHobbies.list.indexOf(item);
    if (index === -1) {
      $scope.selectedHobbies.list.push(item);
    }
  };

这当然行不通，因为一旦选择了一个爱好，它就会显示在每个人的下方。我如何调整代码以适应我在 selectedHobbies 上重复的方式？

HTML 如下。我也在使用指令来监听点击爱好容器并触发 addHobbyItem()

<div data-ng-repeat="personHobby in hobbies.list">
  <div>
    <div style="border: 1px solid black; margin: 10px 0 10px">
      <strong>{{ personHobby.PersonName }}</strong>
    </div>
  </div>
  <div class="">
    <div class="row">
      <div class="col-xs-6">
        <div data-ng-repeat="hobby in personHobby.Hobbies" data-ng-if="!hobby.selected">
          <div data-hobby-item="" data-selected-list="false" data-ng-class="{ selected : hobby.selected }"></div>
        </div>
      </div>
      <div class="col-xs-6">
        <div data-ng-repeat="hobby in selectedHobbies.list">
          <div data-hobby-item="" data-selected-list="true"></div>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

你能把你所有的相关代码放在问题里吗？

标签： javascript angularjs angularjs-ng-repeat ng-repeat

【解决方案1】：

您的 selectedHobbies 应该是一张地图，其中键是人员 ID，值是他选择的爱好的列表。 checkout this plunker

  $scope.selectedHobbies = {
    map: {}
  };

  // Add a hobby to our selected items
  $scope.addHobbyItem = function(pid, item) {
    if(!$scope.selectedHobbies.map[pid]) {
      $scope.selectedHobbies.map[pid] = [];
    }
    var index = $scope.selectedHobbies.map[pid].indexOf(item);
    if (index === -1) {
      $scope.selectedHobbies.map[pid].push(item);
    }
  };

在指令中使用人员 ID 调用 addHobbyItem

scope.addHobbyItem(scope.personHobby.PersonId, scope.hobby);

最后在你的 html 中迭代每个人选择的爱好

    <div data-ng-repeat="hobby in selectedHobbies.map[personHobby.PersonId]">
      <div data-hobby-item="" class="add-remove-container--offence" data-selected-list="true"></div>
    </div>

【讨论】：

谢谢你这完美的作品。地图创意很棒，非常感谢！

【解决方案2】：

类似这样的：

http://plnkr.co/edit/7BtzfCQNTCb9yYkv1uPN?p=preview

我使用 $parent.$index 创建了一个数组数组，其中包含每个人的爱好。

 $scope.addHobbyItem = function (item, index) {

     var ine = $scope.selectedHobbies[index].indexOf(item);
     if (ine === -1) {
        $scope.selectedHobbies[index].push(item);
     }
 };

 function hobbyClickEvent() {
    if (!$(element).hasClass('selected')) {

      scope.addHobbyItem(scope.hobby, scope.$parent.$index);
    } else {
      scope.removeHobbyItem(scope.hobby);
    }
  }

在 HTML 中：

<div data-ng-repeat="hobby in selectedHobbies[$index]">
    <div data-hobby-item="" class="add-remove-container--offence" data-selected-list="true"></div>
</div>

【讨论】：