Показать только событие на основе выбора углового

Question

Поэтому у меня есть список событий, которые я хочу, чтобы иметь возможность фильтрации на основе, в каком состоянии события в Я создаю избранный таким образом:.

<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 х ..... Это требует меньше работы в зависимости от вашей точки зрения. Для этого вы можете избавиться от всей этой логики контроллера, которую вы в настоящее время имеете.

<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 с угловым 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]; 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="app"> 
 
    <div ng-controller="firstCtrl"> 
 

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

 

 

 
    <div class="row" ng-repeat="event in eventsList | filter: {state:stateChosen.name} | limitTo:1"> 
 
     <h3>{{event.title}}<h3> 
 
     <pre>{{event | json}} </pre> 
 
     
 
     
 
    </div> 
 
     </div> 
 
</body>