Question

我有一个带有输入的表单，我想在angularjs的url中传递参数。我还通过url传递了参数，但方法不正确。这是我的代码

<form action="#/report" method="get">
  <select name="provice" aria-controls="example1" class="form-control form-control-sm" multiple="multiple">
    <optgroup label = "province">
      <option value="1">Province 1</option>
      <option value="2">Province 2</option>
      <option value="3">Province 3</option>
      <option value="4">Province 4</option>
      <option value="5">Province 5</option>
      <option value="6">Province 6</option>
      <option value="7">Province 7</option>
    </optgroup>                        
  </select>
  <button type="submit" class="btn btn-success">Submit</button>
</form>

但是当我提交此表单时，我在Url中找到了这个东西

http://localhost/survey-data-0.3/?provice=1#/filteredReport

但是我想要的是

http://localhost/survey-data-0.3/#/filteredReport?provice=1

Answer 1

我认为最好为您实现跨页面/控制器共享数据的服务。

它还可以保存有关省的任何信息，以及获取和设置的任何数据。这样就足以在更新后将其拉到需要的位置。

这是一个演示：

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
    .when("/", {
      templateUrl: "main.html"
    })
    .when("/select", {
      templateUrl: "select.html"
    })
    .when("/report", {
      templateUrl: "report.html"
    });
});
app.controller('myCtrl', function($scope, $location, provinceService) {
  $scope.provinces = provinceService.get();

  $scope.call = function() {
    provinceService.setSelected($scope.selected);
    $location.path('/report');
  }
});
app.controller('myReportCtrl', function($scope, provinceService) {
  $scope.provinces = provinceService.getSelected() || [];
});
app.service('provinceService', function() {
  this.provinces = [
    {"name":"Province 1", "value":1},
    {"name":"Province 2", "value":2},
    {"name":"Province 3", "value":3},
    {"name":"Province 4", "value":4},
    {"name":"Province 5", "value":5},
    {"name":"Province 6", "value":6},
    {"name":"Province 7", "value":7}
  ];
  this.selected = [];

  this.get = function() {
    return this.provinces;
  }

  this.set = function(p) {
    this.provinces = p;
  }

  this.getSelected = function() {
    return this.selected;
  }

  this.setSelected = function(s) {
    this.selected = s;
  }
});

<!DOCTYPE html>
<html ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>

<body>
  <div>
    <a href="#!/">Main</a>

    <div ng-view></div>
  </div>

  <script type="text/ng-template" id="main.html">
    <a href="#!/select">Select</a>
    <a href="#!/report">Report</a>
  </script>

  <script type="text/ng-template" id="select.html">
    <div ng-controller="myCtrl">
      <h3>Select</h3>
      <form ng-submit="call()">
        <select ng-model="selected" ng-options="province.value as province.name group by 'Province' for province in provinces" multiple>
        </select>
        <button type="submit">Submit</button>
      </form>
    </div>
  </script>

  <script type="text/ng-template" id="report.html">
    <div ng-controller="myReportCtrl">
      <h3>Report</h3>
      <p>Selected provinces: {{provinces}}</p>
    </div>
  </script>

</body>

</html>

将表单数据传递到angularjs中的其他页面

1 个答案: