ng单击不在嵌套的ng中触发重复填充$ http.post()中的数据

时间:2013-10-31 12:20:26

标签: javascript angularjs angularjs-ng-repeat angularjs-ng-click

我有一个AngularJS应用程序来搜索旅程。在问题的一部分,我试图显示每个地区的所有可用国家。这个想法是当你点击一个国家时,必须执行一个功能。但它永远不会发火......

任何帮助?

查看

<div id="headersearch" ng-controller="ProductSearchController">
    <div id="headersearchContainer">
        <input id="tripchoise" class="field" type="text" placeholder="Hoe ver wil je gaan?" ng-model="country" ng-change="switchView('countries')" ng-blur="switchView('')" ng-focus="switchView('countries')" />
        <div id="triptypechoise">
            <div class="triptype" ng-class="{active: filter=='single'}" title="Singlereizen" ng-click="switchFilter('single')"><img src="/Resources/Images/Layout/singlereis.png" alt="Singlereizen" /></div>
            <div class="triptype" ng-class="{active: filter=='custom'}" title="Maatwerkreizen" ng-click="switchFilter('custom')"><img src="/Resources/Images/Layout/maatwerk.png" alt="Maatwerkreizen" /></div>
            <div class="triptype" ng-class="{active: filter=='group'}" title="Groepsreizen" ng-click="switchFilter('group')"><img src="/Resources/Images/Layout/groepsreis.png" alt="Groepsreizen" /></div>
        </div>
        <div id="tripdeparturedatechoise" class="field arrow">
            {{date}}
        </div>
    </div>
    <div id="headersearchButton">
        <a href="#" class="bookbutton"><span>ZOEK</span></a>
    </div>
    <div class="clear"></div>
    <input type="text" class="datepicker datehide" id="searchdepartureDate" ng-model="date" datepicker/>
    <div id="searchList" ng-class="{hide:view==''}">
        <div class="loadingproducts" data-ng-show="loading">Loading products...</div>
        <article class="searchentry" ng-show="view=='countries'">
            <div class="" ng-repeat="region in regions">
                <p>{{region.Name}}</p>
                <ul>
                    <li ng-repeat="country in region.Countries">
                        <a ng-click="test()">{{country.Name}}</a>
                    </li>
                </ul>
            </div>
        </article>
    </div>
</div>

CONTROLLER

SearchApp.controller("ProductSearchController", function ($scope, $http) {
    $scope.date = "Vertrek";
    $scope.filter = "single";
    $scope.view = "";
    $scope.country = "";
    $scope.switchFilter = function (filter) {
        if ($scope.filter != filter) {
            $scope.filter = filter;
            $scope.search();
        }
    }
    $scope.switchView = function (view) {
        if ($scope.view != view)
            $scope.view = view;
        if ($scope.view != "" && $scope.view != "countries")
            $scope.search();
    }
    $http.post("/AVProductList/GetCountriesByRegionAsync")
        .success(function (response) {
            $scope.regions = response.regions;
    });
    $scope.search = function () {
        $scope.loading = true;
        $http.post("/AVProductList/SearchProductsHeader?view="+ $scope.view +"&filter=" + $scope.filter, { SearchParameters: {Country: $scope.country}})
          .success(function (data) {
              if ($scope.filter == "custom")
                  $scope.trips = data.results;
              else {
                  if ($scope.view == "trips")
                      $scope.trips = data.grouped.RoundtripgroupCode.doclist.docs;
                  else if ($scope.view == "departures")
                      $scope.trips = data.response.docs;
              }
          });
    };
    $scope.changeDate = function () {
        if (isValidDate($scope.date)) {
            $scope.view = "departures";
            $scope.search();
        }
        else { 
            $scope.date = "Vertrek";
            $scope.view = "trips";
        }
    }
    $scope.selectCountry = function (name, code) {
        $scope.countrycode = code;
        $scope.country = name;
        $scope.view = isValidDate($scope.date) ? "departures" : "trips";
        $scope.search();
    }
    $scope.test = function () {
        alert("Hoi");
    }


});

的Json结果示例
$http.post("/AVProductList/GetCountriesByRegionAsync")
        .success(function (response) {
            $scope.regions = response.regions;
    });

{
  regions:[
  {
    Name:"Asia",
    Countries: 
    [
      {
         Name: "China",
         Code: "CH"
      }
      ,...
    ]
  }  
  ,...
  ]
}

1 个答案:

答案 0 :(得分:1)

我犯了一个愚蠢的错误:

“tripchoise”上的ngBlur在ngClick之前被解雇了。