Javascript 我应该如何构建一个带有直接链接的angularjs页面来影响页面内容

我有一个类似“谷歌搜索”的页面，显示了后端返回的项目列表

在页面中有一个包含许多不同字段的HTML表单。用户可以更改这些字段中的一个或多个值，然后后端将返回新的相关项目列表

其中一个请求是让用户能够打开一个过滤结果的直接链接，到目前为止，这是通过url中的查询参数完成的，但现在我想将此页面更改为与angularjs异步工作。假设该过滤器形式中的字段可以随时更改

---

那么，在angularjs中处理这样的复杂表单并允许表单的get方法的最佳方法是什么呢？

您始终可以在您的作用域中构建一个URL，以响应用户所做的任何事情，然后执行类似于

的操作经过一些思考，我找到了一个解决方案

这里的一些“魔力”是在$scope（名为$scope.filter）中有一个对象来保存所有表单输入值，因此很容易使用，并且如果表单中添加了新输入，则不需要对控制器中的该部分进行任何修改

    angular.module('myApp')

    .controller('myController', ['$scope', '$http' '$location', function($scope, $http, $location) {
        $scope.filter = {};

        $scope.init = function(){
            // $location.search() will return an object with the params,
            // those values are set to $scope.filter, and the filter values are initialized in case of direct link to the page
            $scope.filter = $location.search();

            $scope.executeFilter();
        };

        // doing the job of fetching the data I want to present,
        // using the filter values as a Json in that server call
        $scope.executeFilter = function(){
            // making sure to update the url with the current filter values,
            // so the user is able to copy the relevant url for a later use
            $location.search($scope.filter);

            var paramsAsJson = angular.toJson($location.search());

            $http.post('my-url', paramsAsJson).success(function(data) {
                // update view
            });
        };

        $scope.init();


    }]);

这是一个示例视图：

<form ng-submit="executeFilter()">
    <input name="some_text" type="text" ng-model="filter.some_text">
    <!-- more inputs here -->

    // it will work even with multiple select
    // (will pass to the server a json with array of selected values)
    <select multiple="multiple" name="some_options" ng-model="filter.some_options">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>   
    <button>Filter</button>
</form>

//它甚至可以与多个select一起工作
//（将向服务器传递带有选定值数组的json）
选择1
选择2
滤器

因此，现在如果用户试图使用如下url打开此页面

www.my-url.com/？some_text=foo

指令

ng model=“filter.some_text”

的输入在页面加载后将包含“foo”，并将使用该参数发出服务器请求