Question

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

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

基本的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

Angularjs动态搜索表单

1 个答案: