Question

html：

<ul>
    <li><a>cakes</a></li>
    <li ng-repeat="menu in menuItems">
        <a>{{menu}}</a>
    </li>
</ul>

JS：

$http.get('resources/config.js').then(function (data) {
    $scope.menuBar = data.menuBar;
    var menuItems = [];
    menuItems = $scope.menuBar;
    console.log(menuItems);
  });

config.js：

data = {
    logo : 'My App',
    menuBar : ["Cakes", "Chocolates","Flowers", "Toys", "Special Gifts"],
    view : ["#cake","#chocolates","#flowers","#toys", "#gifts"]
}

我是棱角分明的新手。我试图从config文件中提取数据，该文件包含在menuBar下定义的菜单项。

我想以ul-li格式显示所有项目。但不知怎的，它不起作用。任何人都可以帮助我。

Answer 1

您需要填充$scope.menuItems，这是您在模板中使用的名称。

Answer 2

你必须在一个范围内定义你在ng-repeat中使用的数组，因此为了让angular知道什么是＆＃34; menuItems＆＃34;是的，它必须被定义为应对。

尝试将ng-repeat更改为"menu in menuBar"，或者在您的JS中将menuBar更改为menuItems。

Answer 3

应该是

$scope.menuItems = $scope.menuBar;

你有

menuItems = $scope.menuBar;

除非有特定原因需要$ scope.menuBar，否则您可以跳过它并直接使用：

 $http.get('resources/config.js').then(function (data) {
        var menuItems = [];
        $scope.menuItems = data.menuBar;
 });

不确定您应用的范围，但是如果它超出了超级简单的范围，您将需要为数据使用服务，以便您可以将数据访问权限控制器通过将其作为依赖项注入，例如：

app.service("DataService", function($http){
   var deferred = $q.defer();
   $http.get('resources/config.js').then(function (data) {
       deferred.resolve(data);
    });
    this.getData = function(){
       return deferred.promise;
    }
});

app.controller('someCtrl',['DataService', '$scope',function(DataService, $scope){
     var menuItems = [];
      $scope.menuItems = DataService.getData().menuBar;
}]);

Ng-repeat未显示来自config.js

3 个答案: