Jason Jason - 5 months ago 12
HTML Question

Having trouble setting clearing input field AngularJS

Having trouble setting clearing input field

I’m currently trying to clear the input box on ng-model="newInstruction.instructionText" after an new instruction text has been added. Here is the code where I tried to reset it to empty string but input field didn't clear. Why is that?

I’ve tried console logging the following in updateInstructionText function:

Console.log (newInstruction) returns undefined in console.

Console.log ($scope.newInstruction) returns undefined in console.

Console.log (instruction) returns a object with instruction text inside ex: Object {instructionText: ‘new instruction’}

Controller:

angular.module('app').controller('InstructionController', function($scope, $http, NgTableParams, $filter) {
$scope.initList = function() {
$scope.getRemoteInstructions = function(typed) {
$http.get("/api/instructions?searchInstructionText=" + typed).then(function(response) {
$scope.instructionChoices = _.map(response.data, function(instruction) {
instruction.instructionText;
});
});
};
$scope.updateInstructionText = function(instruction) {
var instructionPromise;
if (instruction.id) {
instructionPromise = $http.put("api/instructions/" + instruction.id, instruction);
}
else {
instructionPromise = $http.post("/api/instructions", instruction);
}

$scope.newInstruction = '';
$instruction = '';

instructionPromise.then(function(response) {
$('#instructionModal').closeModal();
$scope.instructionTable.reload();
});
};
};
});


HTML

<div class="container-fluid" ng-init="initList()">
<div class="row">
<h3>Total Instructions: {{totalInstructions}}</h3>
<table class="striped highlight bordered" ng-table="instructionTable" show-filter="true">
<tr>
<td class="input-field">
<input placeholder="Enter New Instruction Text" ng-model="newInstruction.instructionText" type="text">
</td>
<td>
<a class="waves-effect waves-light btn" ng-click="updateInstructionText(newInstruction)">Add</a>
</td>
</tr>
</table>
</div>
</div>
<ng-include src="'/views/modals/instructionModal.html'"></ng-include>
</div>

Answer

Simply do:

instruction.instructionText = null

Since you are accessing the argument (object) inside the function with name instruction, if you set this to null, you can clear the input field

Comments