Question

我有一个非常大的搜索表单（大约45个输入）的应用程序，我正在努力弄清楚如何在AngularJS中最好地编写代码。我刚刚开始使用Angular，所以这可能很明显，但我有点难过。我不确定如何传递输入到表单中的值，我的服务是在注入的工厂中。

这是我目前的结构：

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

datacontext中有一个运行搜索服务调用的搜索功能：

    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等。当我从搜索控制器调用此函数时，我可以只是从表单中传入$ scope（即ng-click ='RunSearch（$ scope）'）？

对此的另一个要求是，当用户单击搜索按钮以防止运行没有条件的搜索时，我需要计算传入的条件数。不确定如何在viewmodel中实现它...那些在此之前完成此类应用程序的人的任何提示可能有助于指出我正确的方向？谢谢！

Answer 1

我认为你在搜索对象的正确路径上。这样，当您创建表单时，您可以将每个字段绑定到搜索对象上的属性。

至于从表单传递范围（即ng-click =＆＃39; RunSearch（$ scope）＆＃39;），不，你不会想要这样做。在视图中，＆＃34; $ scope＆＃34;隐含着。所以你只想传入搜索对象（ng-click =＆＃39; RunSearch（searchObject）＆＃39;）或者依赖于RunSearch在同一控制器中的事实，因此它已经可以访问搜索通过查看范围来对象（ng-click =＆＃39; RunSearch（）＆＃39; RunSearch（）在同一范围内）。传递搜索对象可能是更好的做法。

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

这样的事情：

<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>

在控制器中：

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

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

1 个答案: