Below is the form for advanced search:
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:
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.
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>
