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中，而不是存储在控制器本身的属性中。通过正确使用数据绑定，您可以大大简化逻辑 - 如果在表单控件上设置ng-model并对选择框使用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;
        });
    }]);

}) ();

Answer 2

您需要将其添加到范围内。

$scope.search = this;

存储搜索结果时..

$scope.search.schedules = data;

然后它将在视图中可用。

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

2 个答案: