在角JS传递价值观 [英] Passing Values in Angular JS
问题描述
我是一个新手，角JS。我创建了一个形式，我的index.html页面，当我填写表格和preSS信息提交，它应该重定向到details.html页面。在那里我可以能够显示填充表单上的详细信息。
I'm a newbie to Angular JS. I've created a form in my index.html page, when I fill the details in the form and press submit, it should redirect to details.html page. Where I can able to show the details filled on the form.
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() {
}
}]);
会是怎样做到这一点的最好方法是什么？任何帮助将AP preciated，谢谢。
What will be the best way to do this? Any help would appreciated, Thanks.
推荐答案
您可以通过添加角路由到您的应用程序，它需要 ngRoute 的依赖实现这一目标。然后，你需要定义一个可容纳部分意见常用的数据像这里是 mainCtrl 一个父控制器。
You can achieve this by adding angular routing to your application which need ngRoute dependency. Then you need to define one parent controller that can hold the partial views common data like here it is mainCtrl.
除了当你创建一个表单，你错过了一些东西，形式应该有它的名称属性，使角度将创建窗体的范围的变量和内部管理的范围变量中的形式有效期像 $有效， $误差等，然后在同一个名称应给予每个表单元素，如果你不声明名称属性，那么就不会认为这是表单元素。
Apart from that you missed few things while you created a form, form should have its name attribute so that angular will create a scope variable of that form and internally manages form validity inside that scope variable like $valid, $error, etc. Then the same name should be given to each form element, if you don't declare the name attribute, then it won't consider it as form element.
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
});
更新
结算上的混乱是什么 form2Ctrl 将包含为每个请求由@ user3440121。
Clearing confusion of on what form2Ctrl will contain as per request by @user3440121.
第二种观点可能包含一个Ajax调用将从服务器上获取用户信息并在视图中显示它，或者它可以是任何显示雇员列表，它取决于你的应用程序的最新要求。
基本上像我一样存储在数据表单对象和直接访问它视图2，因为我可以访问父范围的变量，你不应该存储在客户端的数据。我仅用于演示目的显示这一点。在实际的实施，我们将采取 $路线参数从URL和放大器;在我们将调用Ajax这回你给数据服务器。目前在plunkr我们重定向到视图2 使用 $ location.path（'/视图2'）; ，将改变为 $ location.path（'/编辑/ 1'），你需要添加路由你的的app.config 像
The second view may contain a ajax call that will fetch the user information from server and display it on the view or it can be any show the list of employees, Its depend on the whats the requirement of your application.
Basically you should not store data on client side as i did stored the data in form object and accessing it on view2 directly as I can access parent scope variable. I shown this only for demonstration purpose. In actual implementation we will take $route parameter from the URL & the we will make an ajax call to server which give data back to you. Currently in plunkr we redirecting to view2 using $location.path('/view2'); that would change to $location.path('/edit/1') and you need to add route to your app.config like
路线
.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
});
希望以上信息清除所有关于这个问题的疑虑。谢谢你。
Hope above information cleared all the doubts about the question. Thanks.
这篇关于在角JS传递价值观的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
