CODEWITHSUNDEEP
angularjs
Gabriel Dutra
Gabriel Dutra

Reputation: 36

Show filtered data with angular

I'm a very begginer in AngularJS(1.6) and I need to filter some results from a selected option.

I have to filter cities from states, and until there i'm doing fine. But then I need to filter and show the stores in this city on a list. Does anyone knows how to do It?

My code:

    <!DOCTYPE html>
<html data-ng-app="myApp">

  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
  </head>

  <body data-ng-controller="testController">

    <select id="state" ng-model="stateSrc" ng-options="state for (state, city) in states" ng-change="GetSelectedState()">
        <option value=''>State</option>
    </select>
    <select id="city" ng-model="citySrc" ng-options="city for (city,store) in stateSrc" ng-change="GetSelectedCity()" ng-disabled="!stateSrc">
        <option value=''>City</option>
    </select>
    <select id="city" ng-model="store" ng-options="store for store in citySrc" ng-disabled="!stateSrc || !citySrc">
        <option value=''>Store</option>
    </select>

    <script>
    angular
      .module('myApp', [])
      .run(function($rootScope) {
        $rootScope.title = 'myTest Page';
      })
      .controller('testController', ['$scope', function($scope) {
          $scope.states = {
            'STATE_1': {
              'City_1': ['Store_1', 'Store_2'],
              'City_2': ['Store_3', 'Store_4']
            },
            'STATE-2': {
              'City_3': ['Store_1', 'Store_2'],
              'City_4': ['Store_3', 'Store_4']
            }
          };

          $scope.GetSelectedState = function() {
            $scope.strState = $scope.stateSrc;
          };
          $scope.GetSelectedCity = function() {
            $scope.strCity = $scope.citySrc;
          };
        }
      ])
    </script>
  </body>
</html>

Thank's a lot!

Upvotes: 0

Views: 49

Answers (1)

Evan Hicks
Evan Hicks

Reputation: 36

It would be really helpful if you posted what your data source looks like. Assuming citySrc has objects containing arrays of stores, I would set a selectedCity in your controller when you call GetSelectedCity(), and then:

<ul>
  <li ng-repeat="store in selectedCity.store">{{store}}</li>
</ul>

This will create list items for each store in your selectedCity object.

Upvotes: 1

Related Questions