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

Z时代
2024-01-10
分类：问答

下面是高级搜索的形式：如何使用angularjs处理动态过滤添加的高级搜索？

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

象下面这样：

所以我要处理它在添加/删除AngularJS和在旅途中的动态变化，并且还形成URL（GET/POST）发送数据搜索后端的API。

回答：

您可以使用模型中的对象数组来处理此操作。

模型的结构将类似于

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>