ng-repeat 不显示数据或在 Angular 中重复

Question

我是 Angular 的新手，我正在尝试构建一个搜索页面，我有一个按钮，当它被点击时，它会执行一个函数以从服务器获取数据。数据返回给客户端，现在我希望能够在同一页面上显示数据。

我尝试了一些但没有显示。我做错了什么？

这是我的 html:

<div class="search-area col-md-12  no-padding" ng-controller="SearchController as search">

                <div class="col-md-3">
                    <!-- Select Basic -->
                    <div class="form-group">
                        <div class="col-md-12">
                            <select id="From" name="From" ng-model="d.from" class="form-control"
                                ng-options="item.id as item.dest_name for item in d.destinations">
                        </select>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <!-- Select Basic -->
                    <div class="form-group">
                        <div class="col-md-12">
                            <select id="To" name="To" ng-model="d.to" class="form-control"
                                ng-options="item.id as item.dest_name for item in d.destinations">
                        </select>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <div class="col-md-12">
                            <input id="When" name="When" ng-model="d.when" placeholder="When" class="form-control input-md"   required=""  data-provide="datepicker" data-date-format="mm/dd/yyyy">
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <a ng-click="getSchedules()" class="submit">Buy Ticket</a>
                </div>

            </div>

            <div class="clear"></div>

            <div class="col-md-12" ng-repeat="schedule in d.schedules">
                <div class="form-group">
                    <div class="col-md-12" ng-show="schedule.length">
                        <% schedule.transport_entity %>
                    </div>
                </div>
            </div>

search.js

(function() {
    var app = angular.module('search', []);

    app.controller('SearchController', ['$http', '$scope', function($http, $scope) {
        var search = this;
        this.destinations = [];
        $scope.d = {};

        $scope.getSchedules = function() {

            $http.get('/trips/schedules?from='+$scope.d.from+'&to='+$scope.d.to+'&when='+$scope.d.when).success(function(data) {
                $scope.d.schedules = data; // Getting The Search Results Here
            });
        };

        $http.get('/trips/destinations').success(function(data) {
            $scope.d.destinations = data;
        });
    }]);

}) ();

Answer 1

您需要将其添加到范围。

$scope.search = this;

并且在存储搜索结果时..

$scope.search.schedules = data;

然后它将在视图中可用。

Answer 2

将您的数据存储在 $scope 而不是控制器本身的属性中。您还可以通过正确使用数据绑定来大大简化您的逻辑 - 如果您在表单控件上设置 ng-model 并为 select 框使用 ng-options 那么您不需要任何jQuery 从字段中提取值并生成 option 元素的逻辑 - angular 将为您完成这一切。

<div class="search-area col-md-12  no-padding" ng-controller="SearchController as search">

    <div class="col-md-3">
        <!-- Select Basic -->
        <div class="form-group">
            <div class="col-md-12">
                <select id="From" name="From" ng-model="data.from" class="form-control" ng-options="item.id as item.dest_name for item in data.destinations">
                </select>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <!-- Select Basic -->
        <div class="form-group">
            <div class="col-md-12">
                <select id="To" name="To" ng-model="data.to" class="form-control" ng-options="item.id as item.dest_name for item in data.destinations">
                </select>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="form-group">
            <div class="col-md-12">
                <input id="When" name="When" ng-model="data.when" placeholder="When" class="form-control input-md" required="" data-provide="datepicker" data-date-format="mm/dd/yyyy">
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <a ng-click="getSchedules()" class="submit">Buy Ticket</a>
    </div>

</div>

<div class="clear"></div>

<div class="col-md-12" ng-repeat="schedule in data.schedules">
    <div class="form-group">
        <div class="col-md-12" ng-show="schedule.length">
            <% schedule.transport_entity %>
        </div>
    </div>
</div>

search.js

(function() {
    var app = angular.module('search', []);

    app.controller('SearchController', ['$http', '$scope' function($http, $scope) {
        $scope.data = {};

        $scope.getSchedules = function() {    
            $http.get('/trips/schedules?from='+$scope.data.from+'&to='+$scope.data.to+'&when='+$scope.data.when)
            .success(function(data) {
                $scope.data.schedules = data; // Getting The Search Results Here
            });
        };

        $http.get('/trips/destinations').success(function(data) {
            $scope.data.destinations = data;
        });
    }]);

}) ();

ng-repeat 不显示数据或在 Angular 中重复

ng-repeat not displaying data or repeating in Angular

html

angularjs

angularjs-ng-repeat