angularjsを使用した動的フィルタリングの追加による高度な検索の処理方法は？以下

Question

は、高度な検索用のフォームです：

私は、文書のセクションのためのURLとパラメータを作成することができるが、私のように、「プロパティ制限の追加」セクションを処理するためのプロセスを考えることができませんプロパティは最大5回追加でき、エンドユーザーに依存します。

以下のように：

だから私はのためにデータを送信するために、外出先での追加/削除および動的な変化とAngularJSでそれを処理するために、また、URL（GET/POST）を形成したいですバックエンドのAPIを検索します。

Answer 1

これは、モデル内のオブジェクトの配列を使用して処理できます。

モデルの構造は、あなたのテンプレートで

let dataModel = { 
     'allwords': '', 
     'exact_phrase':'', 
     /// .. the rest of your basic search model variables 

     'property_res': [ {'property':'','action':'contains','value':'','logical_operator':'and'} ] 
} 

ようになります、あなたはdynamicaly「追加プロパティ」についてはdataModel['property_res']

のngのリピートを持つプロパティの制限のリストを生成します。 - ちょうどあなたのdataModel['property_res']に別のオブジェクト（最初の行と同じ構造）を追加するクリックハンドラを実装すると、ng-repeatが残りを処理します。

POSTリクエストに値を取得するには、dataModel['property_res']の配列を繰り返して変数を構築するか、JSON.serialize（）してサーバー側で処理できます。

これはあなたが行くことを望む！ NG-リピートレンダリングの例を追加

EDIT

：

var app = angular.module('app', []); 
 

 
app.controller('mainController', function($scope, $http) { 
 
    
 
    $scope.dataModel = { 
 
     'property_res': [ {'property':'','action':'contains','value':'','logical_operator':'and'} ] 
 
    } 
 
    
 
    $scope.addRow = function(){ 
 
     $scope.dataModel['property_res'].push({'property':'','action':'contains','value':'','logical_operator':'and'}) 
 
    } 
 
    $scope.showModel= function(){ 
 
     console.log($scope.dataModel) 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    
 
<div ng-app="app"> 
 
    <div ng-controller="mainController"> 
 
    
 
    <h1>Property restrictions:</h1> 
 
    <div ng-repeat="ps in dataModel.property_res"> 
 
     <select ng-model="ps.property"> 
 
     <option value="">Pick property</option> 
 
     <option value="Property 1">Property 1</option> 
 
     <option value="Property 2">Property 2</option> 
 
     </select> 
 
     <select ng-model="ps.action"> 
 
     <option value="doesn't contain">doesn't contain</option> 
 
     <option value="contains">contains</option> 
 
      
 
     </select> 
 
     <input ng-model="ps.value"> 
 
     <select ng-model="ps.logical_operator"> 
 
     <option value="or">or</option> 
 
     <option value="and">and</option> 
 
      
 
     </select> 
 
    </div> 
 
    <hr> 
 
    <div><button ng-click="addRow()">Add Row</button></div> 
 
    <hr> 
 
    <div><button ng-click="showModel()">Console Log Model</button></div> 
 
    </div> 
 
</div>