2016-08-13 49 views
0

我正在使用Angular允許我根據需要創建儘可能多的輸入,但我想要一個簡單的警報來顯示輸入的值。如果我不使用重複,但在重複之後沒有使用,我已經能夠獲得價值。使用角度中繼器的多個輸入的警報輸入值

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

回答

0

試試這個

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

item是不是你的範圍內。你的範圍內只有choices[]

+0

哎呀看起來像我的例子冷落項目,但它是[NG-模型= 「項」。我已經更新了這個例子 – Rhino

0

這是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) 
    };