Question

The Js

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>

/data/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);
?>

我在Controller中尝试了更新功能，或者在$ http.get

之外定义了$ scope.Menus 你能帮帮我吗？可能是傻瓜！谢谢！

Answer 1

header.Menus不正确你必须使用菜单。喜欢这个

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

Answer 2

如果您使用控制器作为语法，则不应再将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指向不同的上下文，而不是控制器。}

了解不同的控制器声明样式here。

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

Angular Ajax调用，ng-repeat没有显示

2 个答案: