AngularJs ng-repeat: как привязать значения от <input>, которые находились внутри ng-repeat?

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 в ярлыке.

, пожалуйста, предложите мне что-нибудь.

источник

2016-11-11 vignesh selvarathinam

'texNo' не определено. вы попробовали tex.texNo? И PLS добавить код контроллера. – strelok2010

Я не пробовал tex.texNo. Мой код контроллера находится внутри скрипта, о котором я упомянул выше. –

У вас есть элемент 'tex' внутри области' ng-repeat', поэтому вы можете использовать любые его свойства, например 'ng-model =" text.texNo "' – devqon

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

источник

2016-11-11 11:20:10 Nishant123

Работаю отлично ... Я очень ценю это. –

Рад, что я мог помочь :) – Nishant123

Таким образом, вы должны использовать:

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

источник

2016-11-11 09:38:33 strelok2010

hmm..Не работая с той же проблемой .. вы можете нажать кнопку n, чтобы добавить еще кнопку, а текстовые поля tex и texNo будут отображаться n раз. значения, которые были введены во все n текстовых полей, должны отображаться на этикетке. –

Я просто хочу отобразить все значения n texbox. Если любой другой способ возможен, это нормально для меня. –

Хорошо, где вы хотите сохранить значения текстового поля? В контроллере я вижу только значение {id: 'tex'}. – strelok2010

AngularJs ng-repeat: как привязать значения от <input>, которые находились внутри ng-repeat?

ответ

Смежные вопросы