我应该如何构建一个angularjs页面与直接链接，影响页面内容

How should I build an angularjs page with direct link that impact the page content

本文关键字：影响 链接 angularjs 何构建 构建 一个 我应该      更新时间：2023-09-26

我有一个类似于"Google搜索"的页面，它显示了后端返回的项目列表。

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

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

那么，在angularjs中处理复杂表单并允许表单的get方法的最好方法是什么?

你总是可以在你的作用域中建立一个URL来响应用户所做的任何事情然后做<a ng-attr-href="{{view.userURL}}" target="_blank">{{view.userURL}}</a>

经过一番思考，我有了一个解决办法。

这里的一些"魔法"是在$作用域中有一个对象(名为$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>

所以现在如果一个用户试图打开这个页面的url像这样的www.my-url.com/?some_text=foo的输入指令ng-model="filter.some_text"将包含'foo'页面加载后，与该参数的服务器请求将作出

相关文章：