double binding is not working with AngularJs

Question

double binding is not working with AngularJs

Navigation

#1 by (5 votes)

3

<div ng-controller="TestController">
    <div class="col-md-6 col-md-offset-2">
        <table class="table table-bordered">
            <tr ng-repeat="column in columns track by $index" >
                <td>{{ column }}</td>

                <td><input type="text"  ng-model="size[$index]" class="form-control"/></td>
            </tr>
        </table>
    </div>
    <div ng-repeat="column in columns track by $index">
        -> <span ng-bind="size[$index]"></span> <br/>
    </div>
</div>

Javascript:

var app = angular.module('app',[]);
app.controller('TestController',function($scope, $http){
     $scope.columns = ['nome1','nome2','nome3'];
});

I would like to bind information while I typed in the text input (always referring to the field I typed to span that will show the information), but it did not work out the way I did.

javascript angularjs

asked by anonymous 06.12.2016 / 17:56

1 answer

How do I avoid resetting screen elements when turning the phone? Limit text display by number of characters with CSS

score 5 · Accepted Answer

You need to initialize the size variable in your controller since it will only manipulate items within it:

$scope.size = [];

var app = angular.module('app', []);
app.controller('TestController', function($scope, $http) {
  $scope.columns = ['nome1', 'nome2', 'nome3'];
  $scope.size = [];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="app">
  <div ng-controller="TestController">
    <div class="col-md-6 col-md-offset-2">
      <table class="table table-bordered">
        <tr ng-repeat="column in columns track by $index">
          <td>{{ column }}</td>

          <td>
            <input type="text" ng-model="size[$index]" class="form-control" />
          </td>
        </tr>
      </table>
    </div>
    <div ng-repeat="column in columns track by $index">
      -> <span ng-bind="size[$index]"></span> 
      <br/>
    </div>
  </div>
</div>