Добавление полей формы Динамически в angularjs не работает

Question

Я разрабатываю онлайн-курс. Я пытаюсь динамически добавлять поля формы в свое приложение, чтобы я мог добавить больше видео-лекций для курса. Однако, когда я нажимаю «Добавить другой 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!' }); 
    } 
} 
}}()); 

Пожалуйста, помогите мне с тем, где я ошибаюсь.

Answer 1

Проверьте свой тег ввода HTML для кнопки, о которой вы говорите. Вам нужно удалить s из директивы ng-click. Ваш файл AngularJS объявляет эту функцию как «vm.AddNewChoice», а не «vm.AddNewChoices», что и есть в файле HTML.

Вот код, который необходимо исправить. Обратите внимание, что s удаляется для согласования с вашим файлом AngularJS:

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