Question

所以我有一个事件列表，我希望能够根据事件所在的状态进行过滤。我正在创建select：

    <select name="event-state" ng-model="stateChosen" class="form-control" ng-options="state.stateName for state in states" ng-change="stateChanged(stateChosen)"></select>

以下是我正在尝试的控制器中的代码，但我不确定从何处开始。

    $scope.stateChanged = function(selectedState){
                    var selectedStates = selectedState.stateName.toLowerCase();
                    showFilteredStates(selectedStates,$scope.eventsList);
                };
                var showFilteredStates = function(states, allStates){
                    for(var i = 0;i < allStates.length; i++){
                        if(states === allStates[i].state){
                            ??Now what??
                        }
                    }
                };

最后这是我的模特。关于从这里去哪里的任何想法。

    $scope.eventsList = [
          {
            title: 'Event 1',
            type: 'warning',
            state: "california",
            starts_at: new Date(currentYear,currentMonth,25,8,30),
            ends_at: new Date(currentYear,currentMonth,25,9,30)
          },
          {
            title: 'Event 2',
            type: 'info',
            state: "california",
            starts_at: new Date(currentYear,currentMonth,25,7,30),
            ends_at: new Date(currentYear,currentMonth,25,9,30)
          },      {
            title: 'Event 4',
            type: 'info',
            state: "colorado",
            starts_at: new Date(currentYear,currentMonth,25,7,30),
            ends_at: new Date(currentYear,currentMonth,25,9,30)
          }
    ]

Answer 1

有不同的方法可以做到这一点，我可以告诉你两个。首先，您错过了您的观点（或者至少您没有说出您希望过滤结果的最终位置）。这对答案有所不同。

答案1的x .... 这是将过滤后的事件放在范围上的基本示例，以便可以在视图中使用它们。

$scope.filteredStates = [];

$scope.stateChanged = function(selectedState){
    var selectedState = selectedState.stateName.toLowerCase();
    showFilteredStates(selectedState,$scope.eventsList);
};

var showFilteredStates = function(selectedState, events){
    var filteredStates = [];
    for(var i = 0;i < events.length; i++){
        if(selectedState === events[i].state){
            filteredStates.push(event[i]);
        }
    }
    // use this in your view
    $scope.filteredStates = filteredStates;
    return;
};

答案2的x ..... 根据您的观点，这需要较少的工作。为此，您可以摆脱目前所有的控制器逻辑。

<select name="event-state" ng-model="stateChosen" class="form-control" ng-options="state.stateName for state in states" ng-change="stateChanged(stateChosen)"></select>

<div ng-repeat="event in eventsList | filter: {state:stateChosen.name} | limitTo:(page || 1)">
 {{event.name}}
</div>

<input type="text" ng-model="page">

Answer 2

您可以使用角度为ng-repeater的{{1}}，请参阅下面的演示，如果您只想显示一个事件，请使用filter

limitTo:1

var app = angular.module('app', []);

app.controller('firstCtrl', function($scope) {
  $scope.eventsList = [{
    title: 'Event 1',
    type: 'warning',
    state: "california",

  }, {
    title: 'Event 2',
    type: 'info',
    state: "california",

  }, {
    title: 'Event 4',
    type: 'info',
    state: "colorado",

  }];



  $scope.states = [{
    name: "Alabama",
    abbreviation: "AL"
  }, {
    name: "Alaska",
    abbreviation: "AK"
  }, {
    name: "American Samoa",
    abbreviation: "AS"
  }, {
    name: "Arizona",
    abbreviation: "AZ"
  }, {
    name: "Arkansas",
    abbreviation: "AR"
  }, {
    name: "California",
    abbreviation: "CA"
  }, {
    name: "Colorado",
    abbreviation: "CO"
  }, {
    name: "Connecticut",
    abbreviation: "CT"
  }]
  $scope.stateChosen = $scope.states[4];

});

仅显示基于角度选择的事件

2 个答案: