Jason Jason - 1 year ago 65
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’}


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) {
$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) {


<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">
<td class="input-field">
<input placeholder="Enter New Instruction Text" ng-model="newInstruction.instructionText" type="text">
<a class="waves-effect waves-light btn" ng-click="updateInstructionText(newInstruction)">Add</a>
<ng-include src="'/views/modals/instructionModal.html'"></ng-include>

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download