Angularjs动态搜索表单

Question

图片

亲爱的朋友，我有一个问题。 我正在尝试用动态标准和动态结果构建angular.js一个动态搜索表单。

我有一个表单，用户可以在其中添加多个搜索条件。 条件保持在数组中。 我想将我的表单控件值分配给具有条件数组的model的范围变量。

基本的html如下所示。

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

我正在使用的范围变量如下。

   $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);
        };

我试图分配与ng-repeat组合的ng-model。 我期望我的最终结果将如下所示。

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

请指教。

Answer 1

如果要在$ scope.conditions中维护所有添加的条件，并在最终发布时需要$ post_data将具有最终用户添加的所有值。 这是我为您解决的问题。

您需要使用索引定义ng-model，如下所示。

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

添加条件将发生如下变化。

 $scope.addCondition = function(condition)
    {

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

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

为了进一步帮助您，我为您创建了一个有效的JsFiddle。 但是您可能需要对我的代码进行某些更改，因为您的问题对我来说不是很清楚。

JSFiddle