使用 ng-repeat 显示包含重复对象的对象子数组列表，每个索引有 1 个项目符号

Posted 2023-03-05

【中文标题】使用 ng-repeat 显示包含重复对象的对象子数组列表，每个索引有 1 个项目符号

【英文标题】：Display list of object's child arrays containing dupes with 1 bullet per index using ng-repeat

【发布时间】：2017-02-11 13:48:24

【问题描述】：

我有一个对象 (searchedMenu)，其中包含 3 个长度相等的数组（name、short_name 和 description）。

for(var i=0;i<description.length;i++)
    searchedMenu.name[i] = description[i].name;
    searchedMenu.short_name[i] = description[i].short_name;
    searchedMenu.description[i] = description[i].description;
 
menu.searchedMenu = searchedMenu;

我想将每个name、short_name 和description 显示为这样的无序列表项：

名称1，短名称1，描述1 name2，short_name2，description2

我正在努力做到这一点。我已经在相关的div 中将我的控制器声明为

<div class="container" ng-controller = "NarrowItDownController as narrow">

如果我这样做：

<ul>
  <li ng-repeat="item in narrow.searchedMenu"> item</li>
</ul>

我得到 3 个包含每个数组的所有元素的要点，如下所示：

姓名1，姓名2，... short_name1，short_name2，... 描述1，描述2，...

如果我这样做：

  <li ng-repeat="item in narrow.searchedMenu"> item.name, item.short_name, item.description</li>

我明白了：

,,, ,,, ,,,

作为一个实验，我也试过这个：

<li ng-repeat="item in narrow.searchedMenu.name"> item</li>

它在浏览器中什么也没给我，控制台错误为：

错误：[ngRepeat:dupes] http://errors.angularjs.org/1.5.8/ngRepeat/dupes?p0=item%20in%20narrow.searchedMenu.name&p1=string%3AOrange%20Chicken&p2=Orange%20Chicken

console.log("Searched menu: ", menu.searchedMenu); 是：

Searched menu:  Object name: Array[219], short_name: Array[219], description: Array[219]

完整的控制器代码是（这是一项正在进行的肮脏工作）：

NarrowItDownController.$inject = ['MenuSearchService'];
function NarrowItDownController(MenuSearchService) 
  var menu = this;

  var promise = MenuSearchService.getMatchedMenuItems();
  var item_name = ["",""];
  var description;

  var searchValue = "ton";
  function containsFilter(value) 
    return value.indexOf(searchValue) !== -1;
  

  promise.then(function (response) 
    menu.results = response.data;
    menu.results = menu.results.menu_items;

    description = response.data;
    description = description.menu_items;
    console.log(description);

    var searchedMenu = ;
    searchedMenu.name = [];
    searchedMenu.short_name = [];
    searchedMenu.description = [];

    for(var i=0;i<description.length;i++)
        searchedMenu.name[i] = description[i].name;
        searchedMenu.short_name[i] = description[i].short_name;
        searchedMenu.description[i] = description[i].description;
    

    console.log(searchedMenu);
    menu.searchedMenu = searchedMenu;//description.filter(containsFilter);
    console.log("Searched menu: ", menu.searchedMenu);

  )
  .catch(function (error) 
    console.log("Something went terribly wrong.");
  );

  menu.logMenuItems = function (searchTerm) 
    var promise = MenuSearchService.getMatchedMenuItems(searchTerm);

    promise.then(function (response) 
      console.log(response.data);
    )
    .catch(function (error) 
      console.log(error);
    )
  ;

请注意，我在上面的示例中对搜索词进行了硬编码，因为它正在进行中。

【问题讨论】：

你的角度控制器代码在哪里？

也可以给我们展示narrow.searchedMenu的console.log

@FerasSalim 第一个代码块是Controller代码的关键部分，但我可以添加更多代码，没问题。给我 10 秒。

@defaultcheckbox 当然是Object name: Array[219], short_name: Array[219], description: Array[219]

为什么需要将description数组转换成3个数组。您可以使用ng-repeat="item in description" 并与item.name、item.short_name 和item.description 绑定

【参考方案1】：

试试这个：

<ul>
  <li ng-repeat="item in narrow.searchedMenu.name track by $index">  item ,  narrow.searchedMenu.short_name[$index] ,  narrow.searchedMenu.description[$index] </li>
</ul>

searchedMenu 对象包含三个数组，因此您可以循环其中一个数组，并在循环的每一步中，使用 $index 从其他数组中提取元素。

AngularJS 不允许在 ng-repeat 指令中重复，因此您必须将 track by $index 添加到中继器中

【讨论】：

成功了！！！！ :-) 谢谢，太棒了。我从来不知道track by。

【参考方案2】：

首先我认为对于 isla 没有必要，因为部分数据和菜单中的键值相同，所以我建议只做最后一部分，即 menu.searchedMenu = searchedMenu;并将右侧的搜索菜单更改为您的描述，第二个左侧部分位于控制器内部，将菜单更改为此变量并在 ng 中重复输入：

<li ng-repeat="item in searchedMenu"> item.name, item.short_name, item.description</li>

它应该可以工作

【参考方案3】：

在您的控制器中：

menu.searchedMenu = description;

在您的模板中：

<ul>
 <li ng-repeat="item in searchedMenu"> item.name, item.shortName,item.description,</li>
</ul>

【讨论】：

在控制台中看起来不错，但在浏览器中什么也没有出现。可能是因为控制器作为语法（即narrow？）

【参考方案4】：

如果你不需要拆分它，你应该这样做

<ul>
 <li ng-repeat="item in description"> item.name, item.shortName,item.description,</li>
</ul>

【讨论】：

这不会导致我的浏览器中显示任何内容

你的数据结构是什么？可以举个例子吗

当然，所以该对象在您的答案中有这 3 个数组。如果您想查看原始数据，请点击此处：davids-restaurant.herokuapp.com/menu_items.json