If you want to manage this feature within your model, consider utilizing an array of objects.
Your model's structure could resemble something like this:
let dataModel = {
'allwords': '',
'exact_phrase':'',
/// .. additional basic search model variables
'property_res': [ {'property':'','action':'contains','value':'','logical_operator':'and'} ]
}
In your template, generate the list of property restrictions dynamically using ng-repeat on dataModel['property_res']
To implement "add property," create a click handler that appends another object (with the same structure as the initial row) to dataModel['property_res']. The ng-repeat directive will handle the rest.
To extract values for your POST request, iterate through the array of dataModel['property_res'] and build your variables. Alternatively, you can JSON.serialize() it and process it on the server side.
I hope this helps you move forward!
EDIT
Here is an 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>