How to bind data to inputs?

In this article we will bind data to inputs using AngularJS.

  1. If you want to bind values to inputs, you have to use ngModel directive.

    <form>
        <div>
            <label for="first">First input:</label>
            <input type="text" id="first" ng-model="data">
        </div>
        <div>
            <label for="second">Second input:</label>
            <input type="text" id="second" ng-model="data">
        </div>
    </form>
    

    In this example we have two inputs with ids first and second. Each input has ng-model attribute. This attribute adds data variable to the scope and creates two-way binding between variable and input.

    If you change value in first input, data model will be changed too. Immediately after that value of the second input will be changed too because it have ng-model="data" directive.

  2. Source code

    Demo

08.04.2018