Hey there, I'm facing a challenge that I need help with. I am in the process of creating a dynamic search form using Angular.js. The form needs to have dynamic criteria and display results dynamically based on user input.
The form allows users to add multiple search conditions, which are stored in an array. My goal is to link the values of form controls to scope variables using models that correspond to my conditions array.
Here is a snippet of the basic HTML structure:
<div ng-repeat="condition in conditions">
<select >
<option ng-repeat="column in columns" value="">{{column.name}}</option>
</select>
<select >
<option>Like</option>
<option>=</option>
<option><</option>
<option>></option>
<option><></option><span>-</span>
</select><span>-</span>
<input type="text" style="height: 20px;" value="{{condition.value}}">
</div>
Below are the scope variables being used:
$scope.conditions = [];
$scope.columns = [
{name:'Location',value:'tb1'},
{name:'Place',value:'tb3'},
{name:'Purchase Date',value:'dt3'},
{name:'First Name',value:'tr5'},
{name:'Last Name',value:'tf6'},
{name:'e mail',value:'em6'},
{name:'Place',value:'tb3'},
{name:'Address',value:'ad1'}
];
$scope.addCondition = function()
{
$scope.conditions.push({value: 'val', cond: 'cond', col :'col'});
};
$scope.log = function(){
console.log($scope);
};
I have attempted to use ng-model in combination with ng-repeat. I hope to achieve a final result similar to the following:
$post_data = [
{'dd1','=','1'},
{'tb2','LIKE','Mark'},
{'tb3','LIKE','Lamorav'},
{'tb7','<','2015-01-04'},
{'tb4','LIKE','Kochi'}
]
Your advice on this matter would be greatly appreciated.