无法使用angular.js清除输入字段

Question

使用AngularJS在数据库中提交数据后，我需要保留所有输入字段为空。 我在下面解释我的代码。

course.html

<div id="SHOWDATA">
    <div id="transactionsPortlet" class="panel-collapse collapse in">
        <div class="portlet-body">
            <div class="totalaligndiv">
                <div class="col-md-6">
                    <div class="input-group bmargindiv1 col-md-12">
                        <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Course Name :</span>
                        <select id="coy" name="coy" class="form-control" ng-model="coursename" >
                            <option value="">Select Course</option>
                            <option value="Bachelor of Technology">Bachelor of Technology </option>
                            <option value="Master of Technology">Master of Technology</option>
                            <option value="Master of Computer Application">Master of Computer Application</option>
                        </select>
                    </div
                    <div class="input-group bmargindiv1 col-md-12">
                        <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Short name :</span>
                        <select id="coy" name="coy" class="form-control" ng-model="course_short_name" >
                            <option value="">Select Short name</option>
                            <option value="B-TECH">B-TECH</option>
                            <option value="MTECH">MTECH</option>
                            <option value="MCA">MCA</option>
                        </select>
                    </div>  
                </div>
                <div class="col-md-6">
                    <div class="input-group bmargindiv1 col-md-12">
                        <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Semester :</span>
                        <select id="coy" name="coy" class="form-control" ng-model="semester" >
                            <option value="">Select Semester</option>
                            <option value="IV">IV</option>
                            <option value="VI">VI</option>
                            <option value="VIII">VIII</option>      
                        </select>
                    </div>
                </div>
                <div class="clearfix"></div>    
                <div style="text-align:center; padding-top:10px;">
                    <button class="btn btn-success" type="button" ng-click="addCourseData();">Submit</button>
                </div>
                <div class="clearfix"></div>           
            </div>
        </div>
    </div>
</div>  

上面的文件中的所有字段都被声明。这里我的要求是当用户完成提交数据时所有字段将被清除。

courseController.js

var courseApp = angular.module('GofastoHome');
courseApp.controller('coursecontroller', function ($scope) {
    $scope.addCourseData = function () {
        var userdata = {'course_name': $scope.coursename, 'course_short_name': $scope.course_short_name, 'semester': $scope.semester};
        console.log('userdata', userdata);
        $.ajax({
            type: 'POST',
            url: "php/addCourse.php",
            data: userdata,
            success: function (response) {
                alert(response);
                $scope.coursename = '';
                $scope.course_short_name = '';
                $scope.semester = '';
            },
            error: function (result) {
                alert(result)
            }
        })
    }
});

请帮助我解决此问题。

Answer 1

从@Satpal评论中尝试这种方式并进行一些更改

Instead of $.ajax use $http like $http.post(url, data).success(fn)

您只需使用then()而不是success() ，还应在全局上定义$http

var courseApp=angular.module('GofastoHome');
courseApp.controller('coursecontroller',function($scope,$http){
    $scope.addCourseData= function(){        
             var userdata='course_name':$scope.coursename,
            'course_short_name':$scope.course_short_name,'semester':$scope.semester};
             console.log('userdata',userdata);
             $http.post("php/addCourse.php",userdata).then(function(response){
                alert(response);
                $scope.coursename='';
                $scope.course_short_name='';
                $scope.semester='';

    });
   };
});

Answer 2

是的，我同意@Satpal

Instead of $.ajax use $http like $http.post(url, data).success(fn)

并且如果您必须具有$ .ajax / get / post，则将其与angular的.factory或.service一起使用；

var courseApp=angular.module('GofastoHome');

courseApp.factory('Course', [
    '$q',
    function($q) {

        return {
            addCourse    : function(userdata) {
                var q = $q.defer();

                $.ajax({
                   type:'POST',
                   url:"php/addCourse.php",
                   data:userdata,
                   success: function(response){
                       alert(response);
                       q.resolve(response);
                 },
                error: function(result){
                    q.reject(result);
                 }
            })

            return q.promise;
      }
    }]);



courseApp.controller('coursecontroller',function($scope, Course){
    $scope.addCourseData=function(){
        var userdata={'course_name':$scope.coursename,'course_short_name':$scope.course_short_name,'semester':$scope.semester};
        console.log('userdata',userdata);
        Course.addCourse(userdata).then(function(response) {
            $scope.coursename='';
            $scope.course_short_name='';
            $scope.semester='';
        }, function(err) {
            alert(err)
        });
    }
});

Answer 3

您需要应用在angularjs上下文之外进行的更改。 添加$scope.$apply(); 作为成功功能的最后一个陈述，它应该可以工作。