I am currently utilizing Angular to generate multiple inputs based on user needs. Although this approach works well, I am struggling to implement a simple alert that would display the values of these inputs. I have managed to retrieve the input values without using the repeat function, but encounter issues once I introduce the repeat feature.
<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>