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

Question

我正在开发在线类(class)应用程序。我正在尝试在我的应用程序中动态添加表单字段，以便我可以为类(class)添加更多视频讲座。但是，当我单击“添加另一个 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>

这是我的 Angular Controller 文件。文件名:- 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!' });
  }
}
}}());

请帮我解决我哪里出错了。

Answer 1

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

这是需要修复的代码。请注意 s 已被删除，以便与您的 AngularJS 文件对齐:

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