Question

我必须从一个数据列表中选择一个城市，然后在选择城市后它应该移动到另一个页面，但在我选择任何城市之前它会移动到另一个页面。我无法弄清楚如何克服这个问题，任何帮助都会非常明显

我的Html：

<label> SEARCH COUPONS </label>
  <input type="text" list="cityList" class="form-control" placeholder="Select City" ng-model="selectcity" ng-change="searcity(selectcity)" class="form-control">
       <datalist id="cityList">
           <option ng-repeat="city in cities.results" value="{{city.name}}">
       </datalist>

我的控制器：

$scope.searcity = function (val) {
        var ciseurl = urlcs + val;
        $http.get(ciseurl, config).then(function (response) {
            $scope.cities = response.data;
            var x = $scope.cities.results;
            couponSvc.setCityId(x[length].id);
            $location.path("/couplist");
        });
        };

我尝试了$ timeout服务：

$scope.searcity = function (val) {
        var ciseurl = urlcs + val;
        $http.get(ciseurl, config).then(function (response) {
            $scope.cities = response.data;
            var x = $scope.cities.results;
            couponSvc.setCityId(x[length].id);

        });
        $timeout(callme, 3000);

        function callme(){
        $location.path("/couplist");
        console.log("Timeout occured, City Selected : " + val);    
        };
     };

但这也有一些问题 第一个：它设置了datalist中第一个项目的cityId 第二：如果用户未在3秒内输入任何内容，则会移至其他网页

Answer 1

问题在于 ng-change="searcity(selectcity)"它被包含在DOM中之后立即被调用：非常像观察者（所有观察者在创建后都被调用一次）。

要解决此问题，请尝试设置简单的if：

$scope.searcity = function (val) {
    if(val == null) //void the first initialization.
      return;
    var ciseurl = urlcs + val;
    $http.get(ciseurl, config).then(function (response) {
        $scope.cities = response.data;
        var x = $scope.cities.results;
        couponSvc.setCityId(x[length].id);
        $location.path("/couplist");
    });
};

Answer 2

进行检查。在DOM初始化期间调用此函数。

$scope.searcity = function (val) {

       if($scope.selectcity){
          var ciseurl = urlcs + val;
           $http.get(ciseurl, config).then(function (response) {
             $scope.cities = response.data;
             var x = $scope.cities.results;
             couponSvc.setCityId(x[length].id);
             $location.path("/couplist");
        });
      };
}

在从datalist中选择一个项目之前，它将移动到另一个页面

2 个答案: