Javascript Ng repeat未显示来自config.js的数据
html: config.js:Javascript Ng repeat未显示来自config.js的数据,javascript,angularjs,Javascript,Angularjs,html: config.js: $http.get('resources/config.js').then(function (data) { $scope.menuBar = data.menuBar; var menuItems = []; menuItems = $scope.menuBar; console.log(menuItems); }); 我是新手。我试图从配置文件中提取数据,该文件在菜单栏下定义了菜单项 我想以ul li格式显示所有项目。
$http.get('resources/config.js').then(function (data) {
$scope.menuBar = data.menuBar;
var menuItems = [];
menuItems = $scope.menuBar;
console.log(menuItems);
});
我是新手。我试图从配置文件中提取数据,该文件在菜单栏下定义了菜单项
我想以ul li格式显示所有项目。
但不知何故它不起作用。有人能帮我吗。你需要填充
$scope.menuItems
,这是你在模板中使用的名称。你在ng repeat中使用的数组必须在一个范围内定义,因此为了让angular知道“menuItems”是什么,它必须定义为cope
尝试将ng repeat更改为菜单栏中的“菜单”
,
或者在JS中将菜单栏
更改为菜单项
data = {
logo : 'My App',
menuBar : ["Cakes", "Chocolates","Flowers", "Toys", "Special Gifts"],
view : ["#cake","#chocolates","#flowers","#toys", "#gifts"]
}
你有
$scope.menuItems = $scope.menuBar;
除非有特定的理由使用$scope.menuBar,否则您可以跳过它直接使用:
menuItems = $scope.menuBar;
不确定应用程序的范围;)但是,如果它不是超级简单,那么您将希望使用数据服务,以便通过将数据作为依赖项注入多个控制器来访问数据,例如:
$http.get('resources/config.js').then(function (data) {
var menuItems = [];
$scope.menuItems = data.menuBar;
});
我不明白。你能详细解释一下吗?在html模板中,你是在menuItem中迭代项。所以您需要设置scope的menuItem属性,以便能够在视图中使用它。我或其他回答者的建议不起作用的事实可能意味着您的代码没有绑定到模板。下面是一个示例:。是的,我根据教程进行了尝试,但仍然不起作用。我尝试了两种方法,但都不起作用。也没有出现错误。config.js是无效的json。从一开始就删除“data=”。下面是一个完整的工作示例。确保使用可以找到的众多在线工具之一验证json。例如,您使用单引号而不是双引号。实际上,config.js不是json。我试图从我的主代码中删除硬代码数据,并试图从硬代码数据中提取这些属性数据。我在这里引用了一个例子不,我不能在这里使用服务。因为我是我的config.js,它是一个属性文件,我必须将我的数据放在主代码中以删除硬代码数据;你说你是新手。如果剩下的对你有用的话,你能设置一个Plunk或其他东西让我们看看上下文吗?
$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;
}]);