在angularjs中动态添加表单域

问题描述：

我正在开发一个在线课程应用程序。我正尝试在我的应用程序中动态添加表单域，以便为课程添加更多视频讲座。但是，当我点击“添加另一个URL”时，它不会执行任何操作。在angularjs中动态添加表单域

如果我点击“添加另一个URL”，那么应该出现一个新的表单域，其中包含讲座标题的输入选项并在此处添加视频讲座。哪些没有发生。这是我的html代码。文件名： - 外形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指令中删除s。你的AngularJS文件声明函数为“vm.AddNewChoice”，而不是“vm.AddNewChoices”，这就是你在HTML文件中的内容。

这是需要修复的代码。注意s被移除以便与你的AngularJS文件对齐：

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

谢谢它解决了我的问题。 –

在angularjs中动态添加表单域

相关推荐