javascript - AngularJs:将搜索条件从非常大的搜索表单传递到服务 - 创建自定义模型？

Question

我有一个带有非常大的搜索表单(大约 45 个输入)的应用程序，我正在努力找出如何在 AngularJS 中最好地对其进行编码。我刚刚开始使用 Angular，所以这可能是显而易见的，但我有点困惑。我不确定如何在注入(inject)工厂中的服务中传递输入表单的值。

这是我目前的结构:

app.js - app module
search.js - search controller
datacontext.js - service factory
search.html - search form view

数据上下文中有一个运行搜索服务调用的搜索函数:

    function Search(searchForm) {
        var deferred = $q.defer();

        var requestParameters = {
            UserId: 1234,
            IpAddress: '127.0.0.1',
            QuickSearch: true
        };

        var request = {
            SearchParameters: searchForm,
            RequestParameters: requestParameters
        };

        $http.post(url, request)
            .success(function (data, status) {
                deferred.resolve(data);
            })
            .error(function(data, status) {
                deferred.reject(data);
            });
    }

为了使该函数更易于管理，我只是传入一个搜索对象，其中包含搜索的所有属性 - firstName、lastName、dob 等。当我从搜索 Controller 调用此函数时，我可以只从表单传入 $scope(即 ng-click='RunSearch($scope)')？

对此的另一个要求是，我需要计算用户单击搜索按钮时传入的条件数量，以防止运行没有条件的搜索。不确定如何在 View 模型中实现这一点...之前做过此类应用程序的人的任何提示可能会帮助我指明正确的方向？谢谢!

Answer 1

我认为您对搜索对象的选择是正确的。这样，当您创建表单时，您只需将每个字段绑定(bind)到搜索对象上的属性即可。

至于从表单传递范围(即 ng-click='RunSearch($scope)')，不，您不想这样做。在 View 中，隐含了“$scope”。因此，您只想传递搜索对象 (ng-click='RunSearch(searchObject)') 或依赖于 RunSearch 位于同一 Controller 中的事实，因此只需查看即可访问搜索对象范围(ng-click='RunSearch()' 与 RunSearch() 位于同一范围内)。传入搜索对象可能是更好的做法。

对于表单验证，我会让 RunSearch 函数遍历搜索对象以查找有效的搜索词。如果没有找到，那么 RunSearch 可以在表单上设置 $invalid 标志，然后返回 false。然后，在 View 中，您可以将一条错误消息链接到该无效标志，告诉用户必须至少输入一个搜索词。

类似这样的事情:

<form name="searchform">
  <input ng-model="searchObject.firstName" type="text">
  <input ng-model="searchObject.lastName" type="text">

  <button ng-click="RunSearch(searchObject)">Save</button>
  <span ng-show="!searchform.$invalid">You must enter at least 1 search term</span>
</form>

在 Controller 中:

$scope.RunSearch = function(searchObject) {
  if(!checkSearchObject(searchObject)) {
    $scope.searchform.$invalid = true;
    return false;
  }
  else performSearch(searchObject)
}