在angularjs中动态添加表单字段不起作用

斯卡拉博伊

我正在开发一个在线课程应用程序。我正在尝试在应用程序中动态添加表单字段,以便可以为课程添加更多视频讲座。但是,当我单击“添加另一个URL”时,它没有执行任何操作。当我单击“添加另一个URL”时,应该会出现一个新的表单字段

如果我单击“添加另一个URL”,则应该出现一个新的表单字段,其中包含演讲标题的输入选项,并在此处添加视频演讲。这没有发生。这是我的html代码。文件名:-form-course.client.view.html

<section>
<div class="page-header">
<h1>{{vm.course._id ? 'Edit Course' : 'New Course'}}</h1>
</div>
<div class="pull-right">
<a ng-show="vm.course._id" class="btn btn-primary" ng-click="vm.remove()">
  <i class="glyphicon glyphicon-trash"></i>
  </a>
</div>
<div class="col-md-12">
  <form name="vm.form.courseForm" class="form-horizontal" ng-submit="vm.save(vm.form.courseForm.$valid)" novalidate>
     <fieldset>
        <div class="form-group" show-errors>
           <label class="control-label" for="title">Title</label>
           <input name="title" type="text" ng-model="vm.course.title" id="title" class="form-control" placeholder="Title" required autofocus>
           <div ng-messages="vm.form.courseForm.title.$error" role="alert">
              <p class="help-block error-text" ng-message="required">Course title is required.</p>
           </div>
        </div>
        <div class="form-group">
           <label class="control-label" for="content">Content</label>
           <textarea name="content" data-ng-model="vm.course.content" id="content" class="form-control" cols="30" rows="10" placeholder="Content"></textarea>
        </div>
        <!--  <a class="btn btn-primary pull-right" data-ui-sref="admin.courses.createLecture">  -->
        <div>
           <a class="btn btn-primary pull-right" ng-click="vm.ShowHide()">
           <i class="glyphicon glyphicon-plus"></i>
           </a><br>
           <div ng-show="IsVisible">
              <div class="page-header">
                 <h1>{{vm.course._id ? 'Edit Lecture' : 'New Lecture'}}</h1>
              </div>
              <div class="pull-right">
                 <a ng-show="vm.course._id" class="btn btn-primary" ng-click="vm.remove()">
                 <i class="glyphicon glyphicon-trash"></i>
                 </a>
              </div>
              <div class="col-md-12">
  <form name="vm.form.courseForm" class="form-horizontal" ng-submit="vm.save(vm.form.courseForm.$valid)" novalidate>
  <fieldset data-ng-repeat="field in vm.course.courseLecture track by $index">
  <div class="form-group" show-errors>
  <label class="control-label" for="LectureTitle">Lecture Title</label>
  <input name="courseLecture" type="text" ng-model="vm.course.courseLecture.lecture_title[$index]" id="LectureTitle" class="form-control" placeholder="Lecture Title" required autofocus>
  <div ng-messages="vm.form.courseForm.title.$error" role="alert">
  <p class="help-block error-text" ng-message="required">Lecture name is required.</p>
  </div>
  </div>
  <div class="form-group">
  <label class="control-label" for="courseLecture">Add Lecture video url here</label>
  <input name="courseLecture" type="text" ng-model="vm.course.courseLecture.lecture_video[$index]" id="courseLecture" class="form-control" placeholder="course Lecture">
  </div>
  </fieldset>
  <input type="button" class="btn btn-default" ng-click="vm.addNewChoices()" value="Add another URL">
  </form>
  </div>
  </div>
  </div>
  <div class="form-group">
  <button type="submit" class="btn btn-default">{{vm.course._id ? 'Update' : 'Create'}}</button>
  </div>
  </fieldset>
  </form>
  </div>
</section>

这是我的角度控制器文件。文件名:-course.client.controller.js

(function () {
'use strict';

angular
.module('courses.admin')
.controller('CoursesAdminController', CoursesAdminController);

CoursesAdminController.$inject = ['$scope', '$state', '$window', 'courseResolve', 'Authentication', 'Notification'];

function CoursesAdminController($scope, $state, $window, course, Authentication, Notification) {
var vm = this;

vm.course = course;
vm.authentication = Authentication;
vm.form = {};
vm.remove = remove;
vm.save = save;
vm.ShowHide = ShowHide;
vm.addNewChoice = addNewChoice;

$scope.IsVisible = false;
function ShowHide() {
  // If DIV is visible it will be hidden and vice versa.
  $scope.IsVisible = $scope.IsVisible ? false : true;
}

function addNewChoice() {
  $scope.vm.course.courseLecture.push('');
}

// Remove existing Course
function remove() {
  if ($window.confirm('Are you sure you want to delete?')) {
    vm.course.$remove(function() {
      $state.go('admin.courses.list');
      Notification.success({ message: '<i class="glyphicon glyphicon-ok"></i> Course deleted successfully!' });
    });
  }
}

// Save Course
function save(isValid) {
  if (!isValid) {
    $scope.$broadcast('show-errors-check-validity', 'vm.form.courseForm');
    return false;
  }

  // Create a new course, or update the current instance
  vm.course.createOrUpdate()
    .then(successCallback)
    .catch(errorCallback);

  function successCallback(res) {
    $state.go('admin.courses.list'); // should we send the User to the list or the updated Course's view?
    Notification.success({ message: '<i class="glyphicon glyphicon-ok"></i> Course saved successfully!' });
  }

  function errorCallback(res) {
    Notification.error({ message: res.data.message, title: '<i class="glyphicon glyphicon-remove"></i> Course save error!' });
  }
}
}}());

请帮我解决我要去的地方。

量子泉

检查您的HTML输入标签中所说的按钮。您需要从ng-click指令中删除。您的AngularJS文件将函数声明为“ vm.AddNewChoice”,而不是“ vm.AddNewChoices”,这是HTML文件中的功能。

这是需要修复的代码。注意,为了与您的AngularJS文件对齐,已删除了s:

<input type="button" class="btn btn-default" ng-click="vm.addNewChoice()" value="Add another URL">

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

jQuery AutoComplete在动态添加的表单字段中不起作用

来自分类Dev

带有指令的AngularJS动态表单字段ID不起作用

来自分类Dev

带有指令的AngularJS动态表单字段ID不起作用

来自分类Dev

引导动态表单字段不起作用

来自分类Dev

表单字段值的总和在jquery添加的字段中不起作用

来自分类Dev

表单字段值的总和在jquery添加的字段中不起作用

来自分类Dev

使用“表单提交”添加到表单内部时,Bootstrape动态表单字段不起作用

来自分类Dev

在MeteorJS中动态添加表单字段

来自分类Dev

当我动态创建表单字段时,React 设置状态不起作用

来自分类Dev

angularJS中的动态表单验证不起作用

来自分类Dev

验证空白Django表单字段不起作用

来自分类Dev

AngularJS以各种形式动态添加表单字段

来自分类Dev

angularjs如何推送数组以添加动态表单字段

来自分类Dev

在帮助表单 Prestashop 中动态添加表单字段

来自分类Dev

动态添加表单字段,直到在表单字段中输入特定值为止

来自分类Dev

动态添加表单时 Ajax 表单不起作用

来自分类Dev

AngularJS动态表单字段验证

来自分类Dev

如何动态添加或删除表单字段?

来自分类Dev

Drupal 7表单在迁移后不起作用。提交后,表单字段为空

来自分类Dev

角材料表单不起作用-垫表单字段必须包含MatFormFieldControl

来自分类Dev

为什么CKEditor 4 Angular模块表单字段验证不起作用?

来自分类Dev

为什么 AJAX 渲染后我的预先输入表单字段不起作用?

来自分类Dev

在 Laravel 中动态保存表单字段

来自分类Dev

动态添加的文本字段的DisabledCls不起作用

来自分类Dev

在表单字段-Angular-ReactiveForms 中至少更改一个值之前,使用验证更新表单不起作用

来自分类Dev

在Angular 8中将表单字段动态添加到反应表单

来自分类Dev

从表单中动态添加和删除PHP表单字段(jQuery)

来自分类Dev

将表单字段动态添加到Django表单

来自分类Dev

折叠/展开AngularJS中的表单字段

Related 相关文章

  1. 1

    jQuery AutoComplete在动态添加的表单字段中不起作用

  2. 2

    带有指令的AngularJS动态表单字段ID不起作用

  3. 3

    带有指令的AngularJS动态表单字段ID不起作用

  4. 4

    引导动态表单字段不起作用

  5. 5

    表单字段值的总和在jquery添加的字段中不起作用

  6. 6

    表单字段值的总和在jquery添加的字段中不起作用

  7. 7

    使用“表单提交”添加到表单内部时,Bootstrape动态表单字段不起作用

  8. 8

    在MeteorJS中动态添加表单字段

  9. 9

    当我动态创建表单字段时,React 设置状态不起作用

  10. 10

    angularJS中的动态表单验证不起作用

  11. 11

    验证空白Django表单字段不起作用

  12. 12

    AngularJS以各种形式动态添加表单字段

  13. 13

    angularjs如何推送数组以添加动态表单字段

  14. 14

    在帮助表单 Prestashop 中动态添加表单字段

  15. 15

    动态添加表单字段,直到在表单字段中输入特定值为止

  16. 16

    动态添加表单时 Ajax 表单不起作用

  17. 17

    AngularJS动态表单字段验证

  18. 18

    如何动态添加或删除表单字段?

  19. 19

    Drupal 7表单在迁移后不起作用。提交后,表单字段为空

  20. 20

    角材料表单不起作用-垫表单字段必须包含MatFormFieldControl

  21. 21

    为什么CKEditor 4 Angular模块表单字段验证不起作用?

  22. 22

    为什么 AJAX 渲染后我的预先输入表单字段不起作用?

  23. 23

    在 Laravel 中动态保存表单字段

  24. 24

    动态添加的文本字段的DisabledCls不起作用

  25. 25

    在表单字段-Angular-ReactiveForms 中至少更改一个值之前,使用验证更新表单不起作用

  26. 26

    在Angular 8中将表单字段动态添加到反应表单

  27. 27

    从表单中动态添加和删除PHP表单字段(jQuery)

  28. 28

    将表单字段动态添加到Django表单

  29. 29

    折叠/展开AngularJS中的表单字段

热门标签

归档