如何使用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-repeat屬性限制的「添加屬性」列表 - 你只需要實現點擊處理程序，將其他對象（與最初的行相同的結構）附加到你的dataModel['property_res']，ng-repeat會處理剩下的事情。

爲了獲得POST請求的值，你可以模擬遍歷dataModel['property_res']的數組並構造變量，或者只需JSON.serialize（）並在服務器端處理它。

希望這會讓你走！

編輯

添加例如NG-重複渲染：

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>