个人中心
gpt4 book ai didi

javascript - Angularjs 表单不显示在前端

转载 作者：行者123 更新时间：2023-12-03 05:44:07 27 4
gpt4 key购买 nike

我是 Angular 的新手，我正在尝试显示我的表单。表格是用 http://mackentoch.github.io/easyFormGenerator/ 生成的

链接至页面:http://wingfield.vmgdemo.co.za/#/request_car

任何帮助将不胜感激!

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

我的 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>

我的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); 
          } 
      }]);

最佳答案

我已经为此创建了一个 plnkr，其中包含您上面提到的代码的精简版本。我在您的代码中看到的一些问题如下:

  1. ng-app 未在您的 html 中定义。这就像 Angular 的入口点。

  2. 当您使用 Controller 作为语法时，就像您所做的那样，您不需要注入(inject) $scope。您可以使用“this”访问模型变量。 Here是一篇很好的初学者文章。

    --- click here for the plnkr

关于javascript - Angularjs 表单不显示在前端，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40401832/

27 4 0
文章推荐： javascript - Angular 自定义指令在 promise 解析后未设置值
文章推荐： javascript - xdan/datetimepicker - datetimepicker( {'setOptions' , {highlightedDates : [] } }) is not updated - calendar view is not updated
文章推荐： javascript 作为没有节点的 exe 文件，可以输入值
文章推荐： javascript - html中的循环数字段
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com