Question

我正在学习Angular（1.6.6），所以我希望/假设我缺少一些基本的东西。

我正在填写ng-init上的下拉菜单，该菜单按预期工作。我从数据库返回JSON，console.log（）告诉我JSON正在按预期进行。

我坚持使用ng-repeat，试图在另一个div中显示数据。

我的控制器

app.controller('RandomTownCtrl', [

    '$scope', 
    '$http',

    function($scope, $http){

        window.MY_SCOPE = $scope;

        $scope.getAllRegions = function() {

            $http({
                  method: 'GET',
                  url: '/all-regions'
            }).then(function successCallback(response) {

                $scope.regions = response.data;

            }, function errorCallback(response) {

                console.log('error');

            });
        };

        $scope.getRandomTown = function() {

            var guidEntity = $scope.guidEntity; 

            if (typeof guidEntity === 'undefined') { return };

            $http({
                  method: 'GET',
                  url: '/region-name?region-guid=' + guidEntity              
            }).then(function successCallback(response) {

                $scope.randomTown = response.data; 

                console.log($scope.randomTown);

            }, function errorCallback(response) {

            });

        };
    }
]);

标记

<div class="column col-sm-5 content-column">

        <form ng-controller= "RandomTownCtrl" ng-init="getAllRegions()" ng-submit="getRandomTown()">

            <h3>Generate Random Town</h3>

            <div class="form-group">
                <select name="nameEntity"
                        ng-model="guidEntity" 
                        ng-options="item.guidEntity as item.nameEntity for item in regions">

                    <option value="" ng-if="!guidEntity">Choose Region</option>
                </select>
            </div>

            <button type="submit" class="btn btn-primary">Generate!</button>
        </form>


    </div>

    <div class="column col-sm-5 content-column" id="output-column">

        <div class="header">            
            <h4>Region Name:</h4>
        </div>

        <div ng-controller='RandomTownCtrl'>
            <p ng-repeat="item in randomTown">
                {{ item.name_region }} 
            </p>
        </div>

    </div>

Answer 1

你将$ scope和self混合在一起，你还需要ng-repeat需要一个数组而不是一个对象。

 $scope.randomTown = response.data;

Answer 2

初学者角度错误：我不明白ng-controller指令创建了一个隔离范围，我期望的输出没有发生，因为scope中的数据根本不存在

$ http调用后使用ng-repeat

2 个答案: