How to retrieve the value from textbox using AngularJs?

Question

$scope.add=function()
                {
                    //How to retrieve the value of textbox
                }

<input type='text'><button ng-click='add()'></button>

When I click on the button, how can I retrieve the textbox value in the controller and add that value to the table dynamically?

Answer 1

Assign ng-model to it so that variable will be available inside scope of controller.

Markup

<input type='text' ng-model="myVar"/>
<button type="button" ng-click='add(myVar)'></button>

Answer 2

Bind the text field using ng-model

Example:

$scope.items = [];
$scope.newItem = {
  title: ''
}

$scope.add = function(item) {
  $scope.items.push(item);
  $scope.newItem = { title: '' }; // set newItem to a new object to lose the reference
}

---

<input type='text' ng-model='newItem.title'><button ng-click='add(newItem)'>Add</button>
<ul>
  <li ng-repeat='item in items'>{{ item.title }}</li>
</ul>