javascript - 仅显示基于 Angular 选择的事件

Question

所以我有一个事件列表，我希望能够根据事件所处的状态进行过滤。我正在创建选择，如下所示:

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

这是我正在尝试的 Controller 中的代码，但我不确定从这里开始哪里。

    $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

有不同的方法可以做到这一点，我可以向您展示两种。首先，您错过了您的 View (或者至少您没有说出您希望过滤结果最终出现在哪里)。这会对答案产生影响。

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

$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 .....这需要较少的工作，具体取决于您的观点。为此，您可以摆脱当前拥有的所有 Controller 逻辑。

<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">