Question

我在Angular JS中遇到了问题。这是我写的代码：

<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>

预期的行为是看输入中的两个首字母深度点（0/0和1/43）。然后，如果我更改输入的值，除了在“”标记中看到此修改。

如果您想使用此代码，我会JSFiddle。

为什么只显示第二个dive_point的日期而不显示深度？

为什么当我更改其中一个深度值时，没有任何效果，“pre”标签的深度字段消失？

Answer 1

您的

中的最大值设为0 max="0"

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

并在控制器中将深度设置为43，因此超出了允许的范围。

请参阅下面的工作演示

'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>

Angularjs Ng-model不会绑定输入

1 个答案: