Question

我想使用angular.js做同样的事情。每次输入数字到输入框时，我都需要更新表格行。

<input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
<a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
<div id="container" />
<script>
    function addFields() {
        var number = document.getElementById("member").value;
        alert(number);
        var container = document.getElementById("container");
        while (container.hasChildNodes()) {
            container.removeChild(container.lastChild);
        }
        for (i = 0; i < number; i++) {
            container.appendChild(document.createTextNode("Member " + (i + 1)));
            var input = document.createElement("input");
            input.type = "text";
            container.appendChild(input);
            container.appendChild(document.createElement("br"));
        }
    }
</script>

demo fiddle

Answer 1

以下角度应用程序动态类似于您在附加的javascript（小提琴）中所做的工作..从您的问题，猜猜这会对您有帮助..

Example Fiddle

HTML：

<div ng-controller="MyCtrl">
   <input type="number" ng-model="myvalue" ng-change="addFields()"> {{myvalue}}
   <div ng-repeat="list in lists">
      Member {{list.id}}
      <input type="number" ng-model="list.value">
   </div>
</div>

JS：

var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
  $scope.myvalue = "";
  $scope.addFields = function() {
  $scope.lists = [];
  for (i = 0; i < $scope.myvalue; i++) {
    $scope.tempobj = {};
    $scope.tempobj.id = i;
    $scope.tempobj.value = "";
    $scope.lists.push($scope.tempobj);
  }
 }
}

通过在输入框中输入数字，使用angularjs动态添加行

1 个答案: