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

Question

我有一个对象 (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);
    })
  };

}

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

Answer 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 添加到中继器中

Answer 2

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

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

它应该可以工作

Answer 3

在您的控制器中：

menu.searchedMenu = description;

在您的模板中：

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

Answer 4

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

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