Не удается очистить поле ввода с помощью angular.js

Question

Не удается очистить поле ввода с помощью angular.js

0

Мне нужно сохранить пустое поле ввода после отправки данных в БД с помощью 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)
            }
        })
    }
});

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

satya 28 сен. 2015, в 13:33

Источник

4

Вместо $.ajax используйте $http как $http.post(url, data).success(fn)
Satpal 28 сен. 2015, в 11:08

Теги:

javascript

angularjs

3 ответа

Ещё вопросы

Вместо $.ajax используйте $http как $http.post(url, data).success(fn)

Prabhu · Answer 1 · 2015-09-28T09-33-00.000Z

Да, я согласен с @Satpal

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

и если у вас должен быть $.ajax/get/post, то используйте его с угловым.factory или.service like;

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)
        });
    }
});

Shekhar Khairnar · Answer 2 · 2015-09-28T09-31-00.000Z

Вам необходимо применить изменения, сделанные вне контекста angularjs. Добавить $scope.$apply(); как последнее утверждение в успешной функции, оно должно работать.

Ramesh Rajendran · Answer 3 · 2015-09-28T08-45-00.000Z

Попробуйте этот путь из комментария @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='';

    });
   };
});

Также возможно использование ajax с помощью $scope.$apply(function(){}); функция внутреннего успеха.
$scope.$apply() не годится для использования. Это небезопасно