Question

var app = angular.module('myApp', []);
app.controller('myCtrl',function($scope){
 //Adding New Check# and Check amount Text Boxes
         $scope.texs = [{id: 'tex', value: 'tex1'}];
         
         $scope.add = function() {
           var newItemNo = $scope.texs.length+1;
           $scope.texs.push({'id':'tex'+newItemNo});
         };
           
         //Removing Last Check# and Check amount Text Boxes
         $scope.remove = function() {
           var lastItem = $scope.texs.length-1;
            $scope.texs.splice(lastItem);
         };
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<div class="col-md-12">
<div class="col-md-6">
         <div ng-repeat="tex in texs">
          <div class="form-group">
           <label>tex:</label>
           <div class="col-md-5">
            <input type="number" class="form-control" id="tex.id" ng-model="tex.id" maxlength="6"></input>
           </div>
           <button ng-show="$last"
            ng-click="remove()">-</button>
          </div>
          
         </div>
         <button type="button"
          ng-click="add()">Add More</button>
        </div>
</div>
<div class="col-md-6">
   <label>{{tex.id}}</label>
</div>

</body>
</html>

上面我提到了我的代码。这里如果我没有使用ng-repeat="tex in texs"，标签tex和texNo会在我输入输入值时显示value。但如果我确实使用ng-repeat="tex in texs"，则不会显示value。我知道代码是错误的，但我想要的是如果我点击添加更多并输入第二个tex和texNo的值，我想显示tex的两个值标签中的texNo。

请建议我。

Answer 1

tex.id包含字符串tex，而ng-model期待一个数字。

您可以使用动态密钥并为其提供初始值

内部控制器

 $scope.texs = [{'id1': 1}];

 $scope.add = function() {
   var newItemNo = $scope.texs.length+1;
   $scope.texs.push({['id'+newItemNo]:1});
 };

内部HTML

<div ng-repeat="tex in texs">
              <div class="form-group">
               <label>tex:</label>
               <div class="col-md-5">
                <input type="number" class="form-control" id="{{'id'+($index+1)}}" ng-model="tex['id'+($index+1)]" maxlength="6" />
               </div>
               <button ng-show="$last"
                ng-click="remove()">-</button>
              </div>

             </div>
             <button type="button"
              ng-click="add()">Add More</button>
            </div>

<强> FIDDLE

Answer 2

所以，你需要使用：

$scope.texs = [{id: 'tex', value: 'tex1'}];

在HTML中：

<div class="form-group"">
       <label>tex:</label>
       <div class="col-md-5">
        <input type="number" class="form-control" id="{{tex.id}}" ng-model="tex.id" maxlength="6"></input>
       </div>
       <button ng-show="$last"
        ng-click="remove()">-</button>
      </div>
      <div class="form-group">
       <label>tex No:</label>
       <div col-md-5">
        <input type="number" class="form-control" id="{{tex.value}}" ng-model="tex.value" maxlength="9"></input>
       </div>
      </div>
     </div>

AngularJs ng-repeat：如何绑定ng-repeat内的<input />的值？

2 个答案: