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