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

Posted 2023-02-16

【中文标题】如何使用 angularjs 处理具有动态过滤添加的高级搜索？

【英文标题】：How to handle advanced search with dynamic filtering addition using angularjs?

【发布时间】：2018-05-31 09:55:21

【问题描述】：

下面是高级搜索的表格：

我能够为文档部分创建 URL 和参数，但我无法想到处理“添加属性限制”部分的过程，因为该属性最多可以添加 5 次，并且取决于最终用户.

如下：

所以我想在 AngularJS 中通过添加/删除和动态更改来处理它，并形成 URL (GET/POST) 以将用于搜索的数据发送到后端的 API。

【参考方案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 动态生成属性限制列表

至于“添加属性” - 您只需实现单击处理程序，它将附加另一个对象（与初始行具有相同的结构）到您的 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>

【讨论】：

如果您能告诉我如何使用 ng-repeat 在视图上执行此操作，我将非常高兴和感激，因为我不确定如何通过动态添加和维护高级搜索中的属性添加。我可以彻底了解如何为 POST 数据制作 json。

我添加了 angular 1 示例 sn-p 来演示我的意思

完美@mike_t ...感谢您提供的解释性代码，它清除了我的观点，甚至学到了新东西。干杯伙伴:)