Angular Ajax调用，ng-repeat未显示 - Angular Ajax call, ng-repeat not showing

Angular Ajax call, ng-repeat not showing

本文关键字：显示 ng-repeat Ajax 调用 Angular | 更新日期: 2023-09-27

var app = angular.module('app' , ['ui.router']);
app.controller('HeaderController',function( $scope , $http ){
    $http.get("/data/main_menu.php")
    .success(function(data){
        $scope.Menus = data;
    });
});

HTML

<header ng-controller="HeaderController as header">
<ul id="menu_categories">
    <li ng-repeat="menu in header.Menus">{{ menu.name }}</li>
</ul>

/数据/main_menu.php

<?php
  $menu = array(
    array('name' => 'FACE'),
    array('name' => 'BODY'),
    array('name' => 'HAIR'),
    array('name' => 'MEN'),
    array('name' => 'BABIES & KIDS'),
    array('name' => 'SUN'),
    array('name' => 'AROMATHERAPY')
  );
  echo json_encode($menu);
?>

我尝试在控制器中更新函数或定义$范围。$http.get

之外的菜单你能帮我……吗?可能是一些小的东西!

如果您使用控制器作为语法，您不应该再将Menus对象分配给$scope。相反，您可以设置相应的this属性(控制器对象的属性，而不是$scope对象的属性):

app.controller('HeaderController', function($scope, $http) {
    var self = this;
    $http.get("/data/main_menu.php").success(function(data){
        self.Menus = data;
    });
});

_{我使用self引用，因为在成功回调中this指向不同的上下文，而不是控制器。}

在这里阅读不同的控制器声明样式。

如果你想用$scope.Menus = data;的方式，ngRepeat应该看起来像<li ng-repeat="menu in Menus">{{ menu.name }}</li>。使用controller-as声明，当然您仍然可以使用$scope对象

header。菜单不正确，您必须使用菜单代替。这样的

<header ng-controller="HeaderController">
<ul id="menu_categories">
    <li ng-repeat="menu in Menus">{{ menu.name }}</li>
</ul>