数组在控制台中返回，但未在angularjs中以Html格式显示

这是我的App.js文件，请仔细查看我在哪里做了错误的地方。我已经提供了下面的相关文件index.html和founditemtemplate.html。其返回控制台对象的数组，但我在founditemtemplate.index数组在控制台中返回，但未在angularjs中以Html格式显示

(function() { 
    'use strict' 

    angular.module('NarrowItDownApp', []) 
     .controller('NarrowItDownController', NarrowItDownController) 
     .service('MenuSearchService', MenuSearchService) 
     .directive('foundItems', FoundItemsDirective) 
    ; 

    function FoundItemsDirective() { 
     var ddo = { 
      templateUrl: 'foundItemTemplate.html', 
      restrict: 'E', 
      scope: { 
       items: '<', 
       onRemove: '&' 
      } 
     }; 
     return ddo; 
    } 

    NarrowItDownController.$inject = ['MenuSearchService'] 
    function NarrowItDownController(MenuSearchService) { 
     var ctrlNarrow = this; 
     ctrlNarrow.found = []; 

     ctrlNarrow.searchItems = function() { 
      ctrlNarrow.found = MenuSearchService.getMatchedMenuItems(ctrlNarrow.searchTerm); 
     } 

     ctrlNarrow.remove = function(index){ 
      ctrlNarrow.found.splice(index, 1); 
     } 
    } 


    MenuSearchService.$inject = ['$http'] 
    function MenuSearchService($http) { 

     var service = this; 

     service.getMatchedMenuItems = function(searchTerm) { 

      if (!service.data) service.getData(); 
      if (searchTerm === "") return []; 

      var items = service.data.menu_items; 
      var found = []; 

      for (var i = 0; i < items.length; i++) { 
       var desc = items[i].description; 
       if (desc.indexOf(searchTerm) !== -1) { 
        found.push(items[i]); 
       } 
      } 

      console.dir(found); 
      return found; 
     }; 

     service.getData = function() { 

      $http({ 
       method: "GET", 
       url: ("https://davids-restaurant.herokuapp.com/menu_items.json") 
      }).then(function (result) { 
       console.log(result.data); 
       service.data = result.data; 
      }, function (result) { 
       console.log(result.data); 
       service.getData(); 
      }); 
     } 
     service.getData(); 
    } 
})();

这里所提供的格式不显示是我的主要index.html文件

<!doctype html> 
<html lang="en" ng-app="NarrowItDownApp"> 
    <head> 
    <title>Narrow Down Your Menu Choice</title> 
     <script src="js/angular.min.js"></script> 
     <script src="js/app.js"></script> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="styles/bootstrap.min.css"> 
    <link rel="stylesheet" href="styles/styles.css"> 
    </head> 
<body ng-controller="NarrowItDownController as syntax"> 
    <div class="container"> 
    <h1>Narrow Down Your Chinese Menu Choice</h1> 

    <div class="form-group"> 
     <input type="text" placeholder="search term" class="form-control" ng-model="syntax.searchTerm"> 
    </div> 
    <div class="form-group narrow-button"> 
     <button class="btn btn-primary" ng-click="syntax.searchItems()">Narrow It Down For Me!</button> 
    </div> 

    <items-loader-indicator></items-loader-indicator> 

    <!-- found-items should be implemented as a component --> 
     <div> 
      <found-items items="syntax.found" on-remove="syntax.remove(index)"></found-items> 
     </div> 
    </div> 

</body> 
</html>

，这里是可以Founditemtemplate .html

<ul> 
    <div> 
     <li ng-repeat="item in items"> 
      <div> 
       <b>Name:</b>({item.name}) 
      </div> 
      <div> 
       <b>Description:</b> {{item.description}} 
      </div> 
      <button ng-click="onRemove({index: $index});">Don't want this one!</button> 
     </li> 
    </div> 
</ul> 
<div ng-if="items.length == 0">Nothing Found</div>

来源

2016-11-26 walid

你能提供一个工作jsfiddle吗？ https://jsfiddle.net/ –

不，我急于在jsfiddle.net上试试这个 – walid

我把你的代码放在Plunker - HERE，它工作正常。

有没有机会弄乱foundItemTemplate.html文件名的情况？

应该完全像它在这里

templateUrl: 'foundItemTemplate.html',

这是我能想到的唯一的事情，它不会复制您所描述的行为。

来源

2016-11-26 14:11:49 angularchobo

Thankyou解决了 – walid

数组在控制台中返回，但未在angularjs中以Html格式显示

回答

相关问题