Question

我在我的网站上构建了一个小角度App，用户将searchterm输入到输入字段，然后通过Angular服务返回值。但是，当我尝试提交值时，表单不会提交，只会在第二次尝试时提交。我无法弄清楚为什么会这样。这是我的代码：

<div ng-app="clubFilter" class="col-lg-12">
<div class="col-lg-3">

</div>
<div class="col-lg-9" ng-controller="clubController">       
    <form ng-submit="filterClubs()">
        <input type="text" name="location" ng-model="searchTerm" placeholder="Search..." />
        <input type="submit" name="submit" value="Submit" />
    </form>
    <ul class="leisure-centres">            
        <li ng-repeat="club in clubs">              
            <div class="centre">
                <a class="link" ng-href="{club.link}">More info</a>
                <div class="image" ng-show="club.image > 0">
                    <img src="{{image}}" alt="{{club.title}}" />                        
                </div>
                <div class="details">
                    <div class="title">
                        <h3>{{club.title}}<span ng-show="club.distance > 0"> - {{club.distance}} miles away</span></h3>
                    </div>
                    <div class="address">
                        {{club.building}},
                        {{club.street}},
                        {{club.city}},
                        {{club.county}},
                        {{club.postcode}}                           
                    </div>
                    <div class="tel">
                        <strong>Tel: </strong>
                        <a href="tel:{{club.telephone}}" ng-bind="club.telephone"></a>
                    </div>
                    <div class="email">
                        <strong>Email: </strong>
                        <a href="mailto:{{club.email}}" ng-bind="club.email"></a>
                    </div>
                </div>
            </div>
        </li>           
    </ul>
</div>
</div>
var JSONItems = <?php echo $this->JSONItems; ?>;    
var searchTerm = "<?php echo $this->searchTerm; ?>";

这是我的角度控制器

angular.module('clubFilter.controllers', []).
controller('clubController', function($scope, $http, googleMapService) {
    $scope.keyWord = "SEARCH";
    $scope.clubsJSON = JSONItems;   
    if(searchTerm == "") {          
        $scope.clubs = $scope.clubsJSON;        
    } else {
        $scope.searchTerm = searchTerm;     
        googleMapService.setLatLng($scope.searchTerm, $scope.clubsJSON).then(function(sortedArray) {            
            $scope.$apply(function() {
                $scope.clubs = sortedArray;                 
            });         
        }, function(err) {
            alert("no");
        });         
    }       

    $scope.filterClubs = function() {       
        googleMapService.setLatLng($scope.searchTerm, $scope.clubsJSON).then(function(sortedArray) {                
            $scope.clubs = sortedArray; 
        }, function(err) {
            alert("no");
        });
    }       
});

据我所知，我应该定义所有内容？感谢

Answer 1

试试这个;

<div class="col-lg-9" ng-controller="clubController as club">       
    <form ng-submit="club.filterClubs()">
        <input type="text" name="location" ng-model="club.searchTerm" placeholder="Search..." />
        <input type="submit" name="submit" value="Submit" />
    </form>

在您的控制器中;

this.filterClubs = function() {       
    googleMapService.setLatLng(this.searchTerm, $scope.clubsJSON).then(function(sortedArray) {                
        $scope.clubs = sortedArray; 
    }, function(err) {
        alert("no");
    });
}

Angular Form不会在第一次点击时提交

1 个答案: