javascriptangularjsdynamicadvanced-search

How to handle advanced search with dynamic filtering addition using angularjs?

Below is the form for advanced search:

Advanced Search Box

I am able to create a URL and parameters for document sections but I am unable to think of a process to handle the "Add Property Restrictions" section as the property can be added up to 5 times and it depends on the end user.

Like Below:

Advanced with Dynamic User Entries

So I want to handle it in AngularJS with addition/deletion and dynamic changes on the go and also to form the URL (GET/POST) to send the data for searching to the API for the back end.

Solution

  • You can handle this using an array of objects inside your model.

    The structure of your model will be something like

    let dataModel = {
      'allwords': '',
      'exact_phrase':'',
      /// .. the rest of your basic search model variables

      'property_res': [ {'property':'','action':'contains','value':'','logical_operator':'and'} ]
}

    In your template, you will dynamicaly generate the list of property restrictions with ng-repeat of dataModel['property_res']

    As for the "add property" - you just implement click handler that will append annother object (with same structure as initial row) to your dataModel['property_res'] , ng-repeat will take care of the rest.

    To get the values to your POST request, you simly iterate through the array of dataModel['property_res'] and construct your variables, or you can just JSON.serialize() it and handle it on your server side.

    Hope this will get you going!

    EDIT

    Adding example of ng-repeat rendering:

    var app = angular.module('app', []);

app.controller('mainController', function($scope, $http) {
    
   $scope.dataModel = {
      'property_res': [ {'property':'','action':'contains','value':'','logical_operator':'and'} ]
   }
   
   $scope.addRow = function(){
      $scope.dataModel['property_res'].push({'property':'','action':'contains','value':'','logical_operator':'and'})
   }
   $scope.showModel= function(){
      console.log($scope.dataModel)
   }
});
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 
<div ng-app="app">
  <div ng-controller="mainController">
    
     <h1>Property restrictions:</h1>
     <div ng-repeat="ps in dataModel.property_res">
       <select ng-model="ps.property">
         <option value="">Pick property</option>
         <option value="Property 1">Property 1</option>
         <option value="Property 2">Property 2</option>
       </select>
       <select ng-model="ps.action">
         <option value="doesn't contain">doesn't contain</option>
         <option value="contains">contains</option>
         
       </select>
       <input ng-model="ps.value">
       <select ng-model="ps.logical_operator">
         <option value="or">or</option>
         <option value="and">and</option>
         
       </select>
     </div>
     <hr>
     <div><button ng-click="addRow()">Add Row</button></div>
     <hr>
     <div><button ng-click="showModel()">Console Log Model</button></div>
  </div>
</div>