如何更改http on change select？

Question

我想在我的 Angular 应用程序中构建一个类别过滤器。我有一个选择选项下拉菜单。如果我选择其他类别，我想加载其他 http 请求。每个类别都有不同的 URL 来调用。

我的控制器：

.controller('activiteitenCtrl', function($scope, $http) {

if(selectCategory == 1){
$scope.groep = "http://www.example.com/?id=1";
}
if(selectCategory == 2){
$scope.groep = "http://www.example.com/?id=2";
} 
else{
$scope.groep = "http://www.example.com/?id=3";
}

$scope.loadData = function () {
        $http.get($scope.groep, {cache:false})
        .success(function(data) {$scope.activiteiten = data.posts; });
}

    $scope.loadData();


})

我的模板：

        <select>
      <option value="0">Recent</option>
      <option value="1">Groep 1</option>
      <option value="2">Groep 2</option>
      <option value="3">Groep 3</option>
      <option value="4">Groep 4</option>
      <option value="5">Groep 5</option>
      <option value="6">Groep 6</option>
      <option value="7">Groep 7</option>
      <option value="8">Groep 8</option>


    </select>

我试过 ng click 但这不起作用。如何获取控制器中选择菜单的值并使用 loadData() 函数重新加载数据？以便选定类别中的项目出现在视图中？

Answer 1

你的视图应该是这样的：

   <select ng-model="selectCategory" ng-change="selected()">
  <option value="0">Recent</option>
  <option value="1">Groep 1</option>
  <option value="2">Groep 2</option>
  <option value="3">Groep 3</option>
  <option value="4">Groep 4</option>
  <option value="5">Groep 5</option>
  <option value="6">Groep 6</option>
  <option value="7">Groep 7</option>
  <option value="8">Groep 8</option>


</select>

And in your controller you need to create the callback function that is executed when the value of the select box changes:

$scope.selected = function() {
    if($scope.selectCategory == "1"){
        $scope.groep = "http://www.example.com/?id=1";
    }
    if($scope.selectCategory == "2"){
        $scope.groep = "http://www.example.com/?id=2";
    } 
    else{
        $scope.groep = "http://www.example.com/?id=3";
    }
    $scope.loadData();
}

示例：http://plnkr.co/edit/4pBvvL4MUn09HrjwSPtC?p=preview