0

Below is my angularjs code: I am not able to clear inputComment field after form submit.

Here i am able to add record successfully but after adding record i am trying to clear the input field but i am not able to do it.

HTML code:
<body ng-app="taskDemo" ng-controller="taskController">
    <div class="widget-body">
        <form class="add-task" ng-if="addNewClicked" ng-init="addNewClicked=false;">
        <div class="">
            <div class="input-group">
                <input name="comment" ng-model="inputComment" type="text" class="form-control"   > 
                    <div class="input-group-btn">
                        <button ng-click="addTask(inputComment)" type="submit" class="btn btn-default">
                            <i class="glyphicon glyphicon-plus"></i>&nbsp;Add New Task
                        </button>
                    </div>
            </div>
        </div>
        </form>
    </div>
</body>

JS Code:
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" >
        app = angular.module('taskDemo', []);
        app.controller('taskController', function($scope, $http){
                $scope.addTask = function (task) {
                $http.post("ajax/addTask.php?task="+task)
                    .success(function ($response) {
                       getTaskList();                 
                    });
                 $scope.inputComment = '';  

            };
        }
    </script>
khanz
  • 205
  • 1
  • 9
  • What's inside `getTaskList()` function? Make sure you are not defining `$scope.inputComment` inside. – Kasyx Jan 22 '15 at 12:46
  • Here is getTaskList() Code: function getTaskList() { $http.post("ajax/getTaskList.php") .success(function ($response) { $scope.taskList = $response; }); } – khanz Jan 22 '15 at 12:47
  • @Kasyx: Not defining $scope.inputComment inside getTaskList() but i am using $scope module in it. – khanz Jan 22 '15 at 12:48
  • I think you should declare $scope.inputComment = {}; outside of function also. – Ved Jan 22 '15 at 12:56
  • @Ved I tired that also its not working but initial object on page load...it means it will create other issue – khanz Jan 22 '15 at 12:58
  • No it will not create any issue.. And I will again ask you that, are you sure $scope.inputComment = {}; outside and inside the function is not clearing the input field. – Ved Jan 22 '15 at 13:03
  • 1
    I think something is missing, where is defined "addNewClicked"? Probably u are making another scope somewhere and your inputComment from one scope is not the same thing as inputComment from another. Make sure that u still use the same scope – szapio Jan 22 '15 at 13:14

1 Answers1

0

Read about Prototypical Inheritance here : What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

Change yr controller to this : 

     app.controller('taskController', function($scope, $http){
            $scope.inputComment ={value:''};  
            $scope.addTask = function (task) {
            $http.post("ajax/addTask.php?task="+task)
                .success(function ($response) {
                   getTaskList();                 
                });
             $scope.inputComment ={value:''};  

        };
    }

and Inside yr HTML page change this 

<input name="comment" ng-model="inputComment" type="text" class="form-control"   >

to

<input name="comment" ng-model="inputComment.value" type="text" class="form-control"   >
Community
  • 1
  • 1
nitin
  • 3,747
  • 2
  • 24
  • 31