Angularjs Dynamic Search form

Question

Image

Dear friends, I have a problem. I'm trying to build angular.js a dynamic search form with dynamic criteria's and dynamic result.

I have a form where user can add multiple search condition. The conditions are maintained in an array. I wanted to assign my form controls values to scope variable with model which is my conditions array.

The basic html looks like below.

<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>

The scope variables which i am using are as below.

   $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 tried to assign ng-model with combination of ng-repeat. I am expecting my final result would be something like below.

  $post_data = [
    {'dd1','=','1'},
    {'tb2','LIKE','Mark'},
    {'tb3','LIKE','Lamorav'},
    {'tb7','<','2015-01-04'},
    {'tb4','LIKE','Kochi'}
    ]

Please advice.

Answer 1

If you wanted to maintain all your added condition in $scope.conditions and on final post you needed a $post_data will have all the values added by end user. Then here is my solution to your problem.

You need to define ng-model with index, something like below.

<div ng-controller="MyCtrl">

<div ng-repeat="condition in conditions">
<select ng-model="conditions[$index].val">
    <option ng-repeat="column in columns" >{{column.name}}</option>
</select>
<select ng-model="conditions[$index].cond">
    <option>Like</option>
    <option>=</option>
    <option><</option>
    <option>></option>
    <option><></option><span>-</span>
</select><span>-</span>
<input type="text" style="height: 20px;" value="{{condition}}" ng-model="conditions[$index].col">
 <a ng-click="addCondition(conditions[$index])">Add</a>

The add condition will change something like below.

 $scope.addCondition = function(condition)
    {

        $scope.conditions.push({val: condition.val, cond: condition.cond, col :condition.col});

        console.log($scope.conditions);
    };

To help you further, I have created a working JsFiddle for you. But you may need to make certain changes to my code as your question is not very clear to me.

JSFiddle