Question

我想在我的角度应用程序中构建一个类别过滤器。我有一个选择选项下拉列表。如果我选择其他类别，我想加载其他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>

我尝试点击但是没有用。我如何获得控制器中的选择菜单的值，并使用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>

在控制器中，您需要创建在选择框的值更改时执行的回调函数：

$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

如何在更改选择中更改http？

1 个答案: