如何使用 angularjs 处理带有动态过滤添加的高级搜索？

Question

下面是高级搜索的表格：

我可以为文档部分创建 URL 和参数，但我无法想出处理 "Add Property Restrictions" 部分的过程，因为可以添加属性到 5 倍，这取决于最终用户。

喜欢下面：

所以我想在 AngularJS 中用 addition/deletion 和动态变化处理它，并形成 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'} ]
}

在您的模板中，您将使用 dataModel['property_res']

的 ng-repeat 动态生成属性限制列表

至于 "add property" - 您只需实施点击处理程序，将另一个对象（与初始行具有相同的结构）附加到您的 dataModel['property_res'] ，ng-repeat 将处理其余部分。

要获取 POST 请求的值，您只需遍历 dataModel['property_res'] 的数组并构建变量，或者您可以只 JSON.serialize() 它并处理它在你的服务器端。

希望这能让你继续前进！

编辑

添加 ng-repeat 渲染示例：

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>

如何使用 angularjs 处理带有动态过滤添加的高级搜索？

How to handle advanced search with dynamic filtering addition using angularjs?

javascript

dynamic

advanced-search

angularjs