AngularJS表单未显示在前端
[英]Angularjs form not displaying on the front end
问题描述
I am a newbie when it comes to Angular and I am trying to get my form to display. 
我是Angular的新手，并且试图显示我的表单。 Form was generated with http://mackentoch.github.io/easyFormGenerator/ 表单是使用http://mackentoch.github.io/easyFormGenerator/生成的
Link to page: http://wingfield.vmgdemo.co.za/#/request_car 链接到页面： http : //wingfield.vmgdemo.co.za/#/request_car
Any help would be greatly appreciated! 任何帮助将不胜感激！
Index.html Index.html
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" ng-app="wingField">
<!--<![endif]-->
<head>
<!-- Meta-Information -->
<title>Wingfield Motors</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="Welcome to Wingfield mobile! Call Us Email Us Find Us View Showroom Sell Your Vehicle Apply For Finance Technical Center Complaint Resolution Buyers Tips">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap Stylesheets -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/paper/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker3.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/textAngular/1.4.1/dist/textAngular.css">
<link href="https://rawgit.com/lordfriend/nya-bootstrap-select/master/dist/css/nya-bs-select.min.css" rel="stylesheet">
<!-- CSS Styles -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/mobile.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.css">
<link rel="stylesheet" href="css/owl.transitions.css">
<link href="css/vendor.css" rel="stylesheet">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Website Content-->
<div class="fixed_dream"><a href="#/request_car">Dream Vehicle Request</a></div>
<div ng-include='"templates/header.html"' id="#top"></div>
<div ng-view></div>
<div ng-include='"templates/footer.html"'></div>
My HTML 我的HTML
<div class="container">
<div class="col-md-9" ng-controller="MainCtrl as vm">
<h2>Thank you for your request! One of our sales executives will contact you soonest.</h2>
<!-- here is the simple HTML you need (everything else is decoration) : -->
<form ng-submit="vm.onSubmit()" name="vm.form" novalidate>
<formly-form model="vm.model" fields="vm.fields" options="vm.options" form="vm.form">
<button type="submit" class="btn btn-primary submit-button pull-right" ng-disabled="vm.form.$invalid">{{vm.buttons.submit}}</button>
<button type="button" class="btn btn-primary pull-right" ng-click="vm.options.resetModel()">{{vm.buttons.cancel}}</button>
</formly-form>
</form>
</div>
My JS: 我的JS：
var app = angular.module('wingField', [
'textAngular',
'formly',
'formlyBootstrap',
'ui.bootstrap',
'nya.bootstrap.select',
function () {
}]);
//////////////////////////////
// CONFIG HERE
/////////////////////////////
app.config([ 'formlyConfigProvider',
function(formlyConfigProvider) {
formlyConfigProvider.setType(
{
name: 'richEditor',
template: '<text-angular class="richTextAngular" ng-model="model[options.key || index]"></text-angular>'
}
);
formlyConfigProvider.setType(
{
name: 'blank',
template: '<div></div>'
}
);
var subTitleTemplate = '<div class="row"><div class=""><h4 class="text-center">{{options.templateOptions.placeholder}}<h4><hr/></div></div>';
formlyConfigProvider.setType(
{
name: 'subTitle',
template: subTitleTemplate
}
);
var basicSelectTemplate = ' <ol class="nya-bs-select col-sm-12 col-xs-12 col-md-12 col-lg12" ' +
' ng-model="model[options.key || index]" ' +
' id="{{id}}" ' +
' disabled="options.templateOptions.options.length === 0"> ' +
' <li class="nya-bs-option" nya-bs-option="option in options.templateOptions.options"> ' +
' <a>{{option.name}}</a> ' +
' </li> ' +
' </ol> ' ;
formlyConfigProvider.setType(
{
name: 'basicSelect',
template: basicSelectTemplate
}
);
var groupedSelectTemplate = ' <ol class="nya-bs-select col-sm-12 col-xs-12 col-md-12 col-lg12" ' +
' ng-model="model[options.key || index]" ' +
' data-live-search="true" ' +
' disabled="options.templateOptions.options.length === 0">' +
' <li nya-bs-option="option in options.templateOptions.options group by option.group" ' +
' >' +
' <span class="dropdown-header">{{$group}}</span>' +
' <a>' +
' <span>{{option.name}}</span>' +
' <span class="glyphicon glyphicon-ok check-mark"></span>' +
' </a>' +
' </li>' +
' </ol>';
formlyConfigProvider.setType(
{
name: 'groupedSelect',
template: groupedSelectTemplate
}
);
// angular UI date picker
// thx Kent C. Dodds
var attributes = [
'date-disabled',
'custom-class',
'show-weeks',
'starting-day',
'init-date',
'min-mode',
'max-mode',
'format-day',
'format-month',
'format-year',
'format-day-header',
'format-day-title',
'format-month-title',
'year-range',
'shortcut-propagation',
'datepicker-popup',
'show-button-bar',
'current-text',
'clear-text',
'close-text',
'close-on-date-selection',
'datepicker-append-to-body'
];
var bindings = [
'datepicker-mode',
'min-date',
'max-date'
];
var ngModelAttrs = {};
angular.forEach(attributes, function(attr) {
ngModelAttrs[camelize(attr)] = {attribute: attr};
});
angular.forEach(bindings, function(binding) {
ngModelAttrs[camelize(binding)] = {bound: binding};
});
formlyConfigProvider.setType({
name: 'datepicker',
template: '<input id="{{id}}" class="form-control" ng-click="open($event)" ng-model="model[options.key || index]" is-open="to.isOpen" ng-click="to.isOpen = true" datepicker-options="to.datepickerOptions" />',
wrapper: ['bootstrapLabel', 'bootstrapHasError'],
controller: ['$scope', function($scope) {
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
}],
defaultOptions: {
ngModelAttrs: ngModelAttrs,
templateOptions: {
addonLeft: {
class: 'glyphicon glyphicon-calendar',
onClick: function(options, scope) {
options.templateOptions.isOpen = !options.templateOptions.isOpen;
}
},
onFocus: function($viewValue, $modelValue, scope) {
scope.to.isOpen = !scope.to.isOpen;
},
datepickerOptions: {}
}
}
});
function camelize(string) {
string = string.replace(/[-_s]+(.)?/g, function(match, chr) {
return chr ? chr.toUpperCase() : '';
});
// Ensure 1st char is always lowercase
return string.replace(/^([A-Z])/, function(match, chr) {
return chr ? chr.toLowerCase() : '';
});
}
}]);
//////////////////////////////////////////
// demo controller
//////////////////////////////////////////
app.controller('MainCtrl', ['$scope',
function ($scope, formlyVersion) {
console.info('controller loaded');
// submit function assignment
$scope.vm.onSubmit = onSubmit;
/////////////////////////
// variable assignment
/////////////////////////
//data model here :
$scope.vm.model = {};
//this model is the initial one
$scope.vm.initialFieldsModel =[{"className":"col-xs-12","type":"subTitle","key":"subTitle-1478167186944","templateOptions":{"type":"","label":"","required":false,"placeholder":"Personal Details","description":"","options":[]}},{"className":"col-xs-12","type":"input","key":"input-1478168199256","templateOptions":{"type":"","label":"Your Name","required":true,"placeholder":"","description":"","options":[]}},{"className":"col-xs-12","type":"subTitle","key":"subTitle-1478168225365","templateOptions":{"type":"","label":"","required":false,"placeholder":"Preferred Contact Method","description":"","options":[]}},{"className":"col-xs-12","type":"input","key":"input-1478168258846","templateOptions":{"type":"","label":"Email","required":false,"placeholder":"","description":"","options":[]}},{"className":"col-xs-12","type":"input","key":"input-1478168274554","templateOptions":{"type":"","label":"Phone","required":false,"placeholder":"","description":"","options":[]}},{"className":"col-xs-12","type":"subTitle","key":"subTitle-1478168288381","templateOptions":{"type":"","label":"","required":false,"placeholder":"Vehicle Description","description":"","options":[]}},{"className":"col-xs-12","type":"input","key":"input-1478168345792","templateOptions":{"type":"","label":"Make","required":true,"placeholder":"","description":"","options":[]}},{"className":"col-xs-12","type":"input","key":"input-1478168362231","templateOptions":{"type":"","label":"Model","required":true,"placeholder":"","description":"","options":[]}},{"className":"col-xs-12","type":"input","key":"input-1478168380695","templateOptions":{"type":"","label":"Price Range","required":true,"placeholder":"","description":"","options":[]}},{"className":"col-xs-12","type":"radio","key":"radio-1478168437924","templateOptions":{"type":"","label":"Do you have a Trade In?","required":false,"placeholder":"","description":"","options":[{"name":"Yes","value":0,"group":""},{"name":"No","value":1,"group":""}]}},{"className":"col-xs-12","type":"subTitle","key":"subTitle-1478168449472","templateOptions":{"type":"","label":"","required":false,"placeholder":"Additional Information","description":"","options":[]}},{"className":"col-xs-12","type":"textarea","key":"textarea-1478168467467","templateOptions":{"type":"","label":"Message","required":false,"placeholder":"","description":"","options":[]}}];
$scope.vm.buttons = {
"submit" : "submit",
"cancel" : "cancel"
};
//////////////////////////////////////////////////////
//this model "vm.fields" will be bound to formly
//-> initialisation from $scope.vm.initialFieldsModel
//////////////////////////////////////////////////////
$scope.vm.fields = angular.copy($scope.vm.initialFieldsModel);
// onSubmit function definition :
function onSubmit() {
//an alert of the data model
alert(JSON.stringify($scope.vm.model), null, 2);
}
}]);
1 个解决方案
解决方案1
1 已采纳 2016-11-03 13:11:48
I have created a plnkr for this with a stripped down version of the code you mentioned above. 我使用上面提到的代码的精简版本为此创建了一个plnkr。 Some problems that I saw with your code are as follows: 我在您的代码中看到的一些问题如下：
- ng-app was not defined in your html. ng-app未在您的html中定义。 This acts like an entry point for angular. 这就像角度的入口。
when you are using a controller as syntax like you have done, you do not need to inject $scope.
当像完成操作一样使用控制器作为语法时，不需要注入$ scope。 You can access the model variables using "this". 您可以使用“ this”访问模型变量。 Here is a good beginner article for the same. 这是一篇很好的初学者文章。 ---click here for the plnkr---点击这里查看plnkr
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
在前端显示数据 - Displaying data in front end
前端表单提交 - Front end form submission
在前端显示来自 API 的错误 - Displaying errors from an API onto the Front End
AngularJS-在前端显示数组值 - AngularJS - Show the array values on front end
如何使用javascript或angularjs将文件从前端发送到后端 - how to send a file from front end to back end with javascript or angularjs
在Java（Spring）后端和AngularJS前端之间建立路由 - Making a route between a Java (Spring) back end and an AngularJS front end
为什么表单数据没有被前端验证？ - Why is the form data not validated by the front-end?
WordPress前端表单不会提交 - Wordpress front end form won't submit
NPM Package 表单提交功能 - 前端 - NPM Package functionality on form submit - front end
从DB解析JSON并显示在前端 - Parsing JSON from DB and displaying on the front-end
相关标签