Angularjs Filter data with dropdown

Question

I am kinda new in angularjs and javascript so please be kind, I have two dropdown items (Ionic Select) both of them holds data from a service. The issue is that I need to fi

Answer 1

You may solve this problem like my solution process: my solution like your problem. at first show District list and show Thana list according to selected District. using filter expression

In HTML:

        

            

                
 District List
                

                    
                        Select
                    
                
            
            

                
 Thana List
                

                    
                        Select
                    
                
            
        
    

In controller:

            $scope.selectedDist={};
            $scope.districts = [
                {id: 1, name: 'Dhaka'},
                {id: 2, name: 'Goplaganj'},
                {id: 3, name: 'Faridpur'}
            ];

            $scope.thanas = [
                {id: 1, name: 'Mirpur', dId: 1},
                {id: 2, name: 'Uttra', dId: 1},
                {id: 3, name: 'Shahabag', dId: 1},
                {id: 4, name: 'Kotalipara', dId: 2},
                {id: 5, name: 'Kashiani', dId: 2},
                {id: 6, name: 'Moksedpur', dId: 2},
                {id: 7, name: 'Vanga', dId: 3},
                {id: 8, name: 'faridpur', dId: 3}
            ];
            $scope.filterExpression = function(thana) {
                return (thana.dId === $scope.selectedDist.id );
            };

N.B: Here filterExpression is a custom function that return values when selected district id equal dId in thana.