Question

我是Angular JS的新手。我已经在index.html页面中创建了一个表单，当我填写表单中的详细信息并按提交时，它应该重定向到details.html页面。在哪里我可以显示填写在表格上的详细信息。

HTML

  <html>
  <script src="angular.min.js"> </script>
  <script src="script.js"> </script>
  </head>
  <body ng-app="FormApp">
  <div class="forms" ng-controller="CustomerDetailsController">
    <form novalidate>
      First Name:<br>
      <input type="text" ng-model="firstName" required/>
      <br>
      <br>
      Last Name:<br>
      <input type="text" ng-model="lastName">
      <br>
      <br>
      Age:<br>
      <input type="text" ng-model="lastName">
      <br>
      <br>
      Email :<br>
      <input type="email" ng-model="lastName">
      <br>
      <br>
      Location<br>
      <input type="text" ng-model="lastName">
      <br>
      <br>
      <button ng-click="submit()">SUBMIT</button>
    </form>
  </div>
  </body>
  </html>

CONTROLLER

var FormApp = angular.module('FormApp', []);
FormApp.controller('CustomerDetailsController', ['$scope',function($scope) {
    $scope.submit = function() {

    }
}]);

最好的方法是什么？任何帮助将不胜感激，谢谢。

Answer 1

您可以通过向需要ngRoute依赖项的应用程序添加角度路由来实现此目的。然后你需要定义一个父控制器，它可以保存部分视图公共数据，就像这里mainCtrl一样。

除了您在创建表单时遗漏了一些内容之外，表单应该具有其name属性，以便angular将创建该表单的范围变量，并在该范围变量内部管理form有效性例如$valid，$error等。然后，每个表单元素都应该被赋予相同的name，如果您没有声明name属性，那么它赢了＆＃39;不要将其视为表单元素。

<强> HTML

<html ng-app="app">
  <head>
    <script type="text/javascript" src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script type="text/javascript" src="http://code.angularjs.org/1.2.13/angular-route.js"></script>
    <script src="example.js"></script>
  </head>
  <body>

<div ng-controller="mainCtrl">
  <div class="forms">
    <ng-view></ng-view>
  </div>
</div>
  </body>
</html>

<强> CODE

var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
  $routeProvider
    .when('/view1', {
      templateUrl: 'view1.html',
      controller: 'CustomerDetailsController'
    })
    .when('/view2', {
      templateUrl: 'view2.html',
      controller: 'form2Ctrl'
    })
    .otherwise({
      redirectTo: '/view1'
    });
});
app.controller('mainCtrl', function($scope) {
  $scope.form = {};
});

app.controller('CustomerDetailsController', function($scope,$location) {
  $scope.submit = function(){
    if($scope.form1.$valid)
      $location.path('/view2');
  };
});

app.controller('form2Ctrl', function($scope,$location) {
  //this controller contain the data which will you get from
});

Working Plunkr

<强>更新

根据@ user3440121的请求清除form2Ctrl将包含的内容的混淆。

第二个视图可能包含一个ajax调用，它将从服务器获取用户信息并将其显示在视图上，或者它可以显示员工列表，它取决于应用程序的要求。基本上你不应该在客户端存储数据，因为我确实将数据存储在表单对象中并直接在view2上访问它，因为我可以访问父作用域变量。我只是出于演示目的展示了这一点。在实际实施中，我们将从网址＆amp;中获取$route参数。我们将对服务器进行ajax调用，将数据提供给您。目前在plunkr中，我们使用view2重定向到$location.path('/view2');，$location.path('/edit/1')会更改为app.config，您需要添加路由到.when('/edit/:id', { templateUrl: 'view2.html', controller: 'form2Ctrl' })

<强>路线

app.controller('form2Ctrl', function($scope,$route) {
   //we can get id here from $route object
   console.log($route.params.id); //here it will be `id` which `1` in the URL
   //now you have id you can make ajax to server and get required data
});

<强>控制器

{{1}}

希望以上信息清除了对这个问题的所有怀疑。感谢。

Answer 2

您的$scope.submit函数内部没有任何内容可用于路由。

应该是：

$scope.submit = function($scope) { 
  $scope.$apply(function() { 
    $location.path("*place your details page here*"); 
  });
}

请注意，您还需要向控制器注入$ location，如下所示：

FormApp.controller('CustomerDetailsController', 
  ['$scope', '$location', function($scope, $location) ...

尝试阅读以下内容以获取更多详细信息： https://docs.angularjs.org/api/ng/service/$location

您是否也尝试过查看路径？（例如 angular.min.js ， script.js ）

在Angular JS中传递值

2 个答案: