我是 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() {
}
}]);
执行此操作的最佳方法是什么？任何帮助将不胜感激，谢谢。
最佳答案
您可以通过向需要 ngRoute 依赖项的应用程序添加 Angular 路由来实现此目的。然后你需要定义一个父 Controller 来保存部分 View 的公共(public)数据，就像这里的mainCtrl。
除此之外，您在创建表单时遗漏了一些东西，表单应该具有其 name 属性，以便 Angular 将创建该表单的范围变量并在内部管理 form 该范围变量内的有效性，如 $valid、$error 等。如果您不要声明 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 将包含的内容的困惑。
第二个 View 可能包含一个 ajax 调用，该调用将从服务器获取用户信息并将其显示在 View 上，或者它可以是显示员工列表的任何内容，这取决于您的应用程序的要求。
基本上你不应该在客户端存储数据，因为我确实将数据存储在表单对象中并直接在 view2 上访问它，因为我可以访问父范围变量。我展示这个只是为了演示目的。在实际实现中，我们将从 URL 中获取 $route 参数，然后我们将对服务器进行 ajax 调用，服务器将数据返回给您。目前在 plunkr 中，我们使用 $location.path('/view2'); 重定向到 view2，这将更改为 $location.path('/edit/1 ') 并且您需要将路由添加到您的 app.config 中
路线
.when('/edit/:id', {
templateUrl: 'view2.html',
controller: 'form2Ctrl'
})
Controller
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
});
希望以上信息消除了对该问题的所有疑虑。谢谢。
关于javascript - 在 Angular JS 中传递值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28657287/