使用Angular中继器警告多个输入的输入值

Alert input value of multiple inputs using an Angular repeater

本文关键字：输入 Angular 中继器 警告 使用      更新时间：2023-09-26

我正在使用Angular来允许我创建尽可能多的输入，但我想有一个简单的警报，将显示输入的值。我已经能够得到这个值，如果我不使用repeat，但不是在我有repeat之后。

<div ng-controller="MainCtrl">
  <form id="quickPick-form1" class="list" ng-submit="submit()" >
      <fieldset  data-ng-repeat="choice in choices" class="clearfix">
          <input type="text" placeholder="Item" class="pull-left" ng-model="item">
          <button class="remove pull-left" ng-show="$last" ng-click="removeChoice()">X</button>
      </fieldset>
      <button id="quickPick-button1" style="font-weight:600;font-style:italic;" class="addfields button button-calm button-block button-outline " ng-click="addNewChoice()">Tap me to add an item!</button>
      <div class="spacer" style="width: 300px; height: 40px;"></div>
      <p>Have enough items added? Click Randomize</p>
      <button ng-click="showChoice()" id="quickPick-button2" class=" button button-calm button-block ">Randomize</button>
      <div class="spacer" style="width: 300px; height: 20px;"></div>   
  </form>
</div>
<script>
.controller('MainCtrl', function($scope) {
  $scope.choices = [{id: 'choice1'}, {id: 'choice2'}];
  $scope.addNewChoice = function() {
  var newItemNo = $scope.choices.length+1;
    $scope.choices.push({'id':'choice'+newItemNo});
  };
  $scope.removeChoice = function() {
    var lastItem = $scope.choices.length-1;
    $scope.choices.splice(lastItem);
  };
  $scope.item = null;
  $scope.showChoice = function(){
    alert($scope.item);
  };
});
</script>

试试这个

$scope.showChoice = function(){
    alert($scope.choices.split(" /n"));
};

item不在您的作用域内。您的作用域中只有choices[]。

这是一个Plunker。您需要将您的模型更改为choice.item。

      <form id="quickPick-form1" class="list" ng-submit="submit()" >
  <fieldset  data-ng-repeat="choice in choices" class="clearfix">
      <input type="text" placeholder="Item" class="pull-left" ng-model="choice.item">
      <button class="remove pull-left" ng-show="$last" ng-click="removeChoice()">X</button>
  </fieldset>
  <button id="quickPick-button1" style="font-weight:600;font-style:italic;" class="addfields button button-calm button-block button-outline " ng-click="addNewChoice()">Tap me to add an item!</button>
  <div class="spacer" style="width: 300px; height: 40px;"></div>
  <p>Have enough items added? Click Randomize</p>
  <button ng-click="showChoice()" id="quickPick-button2" class=" button button-calm button-block ">Randomize</button>
  <div class="spacer" style="width: 300px; height: 20px;"></div>

和在JavaScript中:

      $scope.showChoice = function(){
    var myChoices = '';
    for(var i =0; i < $scope.choices.length; i++){
      myChoices = myChoices + ', ' + $scope.choices[i].item;
    }
    alert(myChoices)
  };
相关文章：