javascript - how to clear input field after pushing item on array? - Stack Overflow

admin管理员组

文章数量:1419673

I made a simple example of angular 2. I added item in an array. When user types anything and press the button, it is added into the array and get displayed in the list .

I am facing two issues

• 1 ) how to clear input field after pusing to array ?

• 2 ) How angular 2 works ? As in document Angular 2 remove watches .So when item is added in array .how template show updated list .how ?

  is it watching the model of list ?

Here is my plunker code

<ion-navbar *navbar>
  <ion-title>
    Ionic 2
  </ion-title>
</ion-navbar>

<ion-content class="has-header">
 <ion-list style="border:2px solid grey;height:500px">
  <ion-item *ngFor="#item of Todo">
{{item.name}}
  </ion-item>
</ion-list>
<label class="item item-input">
  <span class="input-label" >Add Todo</span>
  <input type="text" #todo placeholder="Add todo" >
</label>
</ion-content>

<ion-footer-bar (click)="addItem(todo.value)">

  <h1 class="title" style='color:red'>Add Todo!</h1>

</ion-footer-bar>

I made a simple example of angular 2. I added item in an array. When user types anything and press the button, it is added into the array and get displayed in the list .

I am facing two issues

• 1 ) how to clear input field after pusing to array ?

• 2 ) How angular 2 works ? As in document Angular 2 remove watches .So when item is added in array .how template show updated list .how ?

  is it watching the model of list ?

Here is my plunker code

<ion-navbar *navbar>
  <ion-title>
    Ionic 2
  </ion-title>
</ion-navbar>

<ion-content class="has-header">
 <ion-list style="border:2px solid grey;height:500px">
  <ion-item *ngFor="#item of Todo">
{{item.name}}
  </ion-item>
</ion-list>
<label class="item item-input">
  <span class="input-label" >Add Todo</span>
  <input type="text" #todo placeholder="Add todo" >
</label>
</ion-content>

<ion-footer-bar (click)="addItem(todo.value)">

  <h1 class="title" style='color:red'>Add Todo!</h1>

</ion-footer-bar>

• javascript
• angularjs
• angular
• ionic2
• angular2-routing

Share Improve this question Follow edited May 23, 2016 at 6:18 Shashank Vivek 17.5k99 gold badges6969 silver badges110110 bronze badges asked May 23, 2016 at 5:48 user944513user944513 12.8k5252 gold badges185185 silver badges348348 bronze badges 3

• Check this post about your second question. It's too long of an explanation to put in an answer :) – Abdulrahman Alsoghayer Commented May 23, 2016 at 6:05
• I will read .could you please example in few words – user944513 Commented May 23, 2016 at 6:06
• Read the answers here, they explain it much better than I ever could. – Abdulrahman Alsoghayer Commented May 23, 2016 at 6:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Instead of clearing the value in the function you can do on the click event too like this :-

<ion-footer-bar (click)="addItem(todo.value);todo.value = ''">

  <h1 class="title" style='color:red'>Add Todo!</h1>

</ion-footer-bar>

Working Plunker

You can clear the input fields by doing the following things.

Home.html

previous code

<ion-footer-bar (click)="addItem(todo.value)">

  <h1 class="title" style='color:red'>Add Todo!</h1>

</ion-footer-bar>

changed code

<ion-footer-bar (click)="addItem(todo)">

  <h1 class="title" style='color:red'>Add Todo!</h1>

</ion-footer-bar>

Modify the addItem function in home.ts like below.

addItem(v){
      this.Todo.push({name:v.value})
      v.value='';
    }

Hope this gives you a solution for the problem you faced. There are so many other ways too. Since you get the value from the id, I have given the solution based on that.

updated plunker code below

http://plnkr.co/edit/oCxrgxNlCkjVnTrhZGQA?p=preview

Answer for the deleting issue.

instead of this

deleteTodo(obj){
      alert('----');
      var index =  this.Todo.indexOf(obj);
  this.Todo.splice(index, 1); 
    }

follow this

    deleteTodo(name){
      var index =  this.Todo.indexOf(name);
  this.Todo.splice(index, 1); 
    }

Hope this helps you.

本文标签： javascripthow to clear input field after pushing item on arrayStack Overflow