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

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

因此，您需要使用：

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

Answer 2

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

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

AngularJs ng-repeat : how to bind the values from <input> which was inside the ng-repeat?

angularjs

angularjs-ng-repeat

angularjs-controller