顯示使用納克 - 重複

Question

含有愚弄與每個索引1發子彈對象的子陣列的名單上有含有相等的長度（name，short_name，和description）的3個陣列的對象（searchedMenu）。

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，short_name1，內容描述
• 名2，short_name2，內容描述2

我正在努力做到這一點。我已經說過我是在相關div控制器

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

如果我這樣做：

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

我得到一個包含每個陣列中的所有元素像這樣3個要點：

• name1，name2，...
• short_name1，short_name2，...
• descrip檢查一次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> 

，它給了我沒有在瀏覽器的控制檯錯誤：

Error: [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-重複指令重複因此，你必須添加track by $index到你的中繼

Answer 2

如果你不需要它拆出來，你應該這樣做

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

Answer 3

在你的控制器：

menu.searchedMenu = description; 

在模板：

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

Answer 4

第一我認爲isla不是必須的，因爲關鍵值在零件數據和menú中是相同的，所以我建議只做最後一部分，是menu.searchedMenu = searchingMenu;並更改searchedmenu在你的描述正確和第二IR的左邊是一個控制人變更菜單到這個變量的內部和NG重複地說：

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

它應該工作