在角度 JS 中传递值

Passing Values in Angular JS

本文关键字：JS      更新时间：2024-04-08

我是Angular JS的新手。我在索引.html页面中创建了一个表单，当我在表单中填写详细信息并按提交时，它应该重定向到详细信息.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>

控制器

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

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

您可以通过

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

除此之外，您在创建表单时错过了一些东西，表单应该具有其name属性，以便 angular 将创建该表单的范围变量，并在内部管理该范围变量form有效性，如 $valid、$error 等。然后应该为每个表单元素提供相同的name，如果您不声明 name 属性，那么它不会将其视为表单元素。

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

法典

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
});

工作普伦克

尔

更新

根据@user3440121的要求，清除对form2Ctrl将包含哪些内容的混淆。

第二个视图可能包含一个 ajax 调用，该调用将从服务器获取用户信息并将其显示在视图上，或者它可以是任何显示员工列表的内容，这取决于应用程序的要求。基本上，您不应该将数据存储在客户端，因为我确实将数据存储在表单对象中并直接在view2上访问它，因为我可以访问父范围变量。我展示这个只是为了演示目的。在实际实现中，我们将从URL中获取$route参数，我们将对服务器进行ajax调用，将数据返回给您。目前在 plunkr 中，我们使用将更改为 $location.path('/edit/1') 的$location.path('/view2');重定向到view2，您需要将路由添加到您的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
});

希望上述信息消除了对这个问题的所有疑问。谢谢。

您的 $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(

相关文章：
  • 没有找到相关文章