CODEWITHSUNDEEP
htmlangularjs
Adrien BARRAL
Adrien BARRAL

Reputation: 3604

Angular JS Ng-model doesn't bind an input

I am facing a problem in Angular JS. Here is the code I wrote :

<script>
    function diveInput($scope) {
    $scope.dive_points = [ {depth: 0, date: 0}, {depth: 43, date: 1} ]
}
</script>
<div ng-app ng-controller="diveInput">
    <ul>
        <li ng-repeat="dive_point in dive_points">
            <label>date :</label> <input type="number" min="0" ng-model="dive_point.date" />
            <label>depth :</label> <input type="number" max="0" ng-model="dive_point.depth"/>
        </li>
    </ul>
    <pre>{{dive_points}}</pre>
</div>

The expected behaviour is to see the two initials depth points in the inputs (0/0 and 1/43). Then, if I change the value of an input, I except to see this modifications in the "" tag.

I did JSFiddle for this code if you want to play with it.

Why only the date of the second dive_point is displayed and not the depth ?

Why when I change one of the depth value, nothing works, the depth field disapear of the "pre" tag ?

Upvotes: 0

Views: 295

Answers (1)

sylwester
sylwester

Reputation: 16498

You've got set max to 0 max="0" in your

 <input type="number" max="0" ng-model="dive_point.depth" />

and in your controller you set depth to 43 so it was out of allowed range.

Please see working demo below

'use strict';

function diveInput($scope) {
  $scope.dive_points = [{
    depth: 0,
    date: 0
  }, {
    depth: 43,
    date: 1
  }]

  $scope.addDivePoint = function() {
    $scope.dive_points.push({
      depth: 0,
      date: 0
    });
  };
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="diveInput">
  <ul>
    <li ng-repeat="dive_point in dive_points">
      <div>
        <label>date :</label>
        <input type="number" min="0" ng-model="dive_point.date" />
      </div>
      <div>
        <label>depth :</label>
        <input type="number" max="50" ng-model="dive_point.depth" />
      </div>
    </li>
  </ul>
  <pre>{{dive_points}}</pre>
</div>

Upvotes: 3

Related Questions