I have a feature on my website where users can create via points. Each user starts with one point, and if they want to add more, they can click "add" to insert a new object in the array with an empty value. The user then has the option to input a new value for the added point. Users can continue adding via points until they reach 5. How can I achieve this? Below is my code snippet.
My requirements are:
- Users should be able to create via points by adding a new item with val="" and then change the value using an input field.
- Once 5 via points are reached, no more additions should be allowed.
Any assistance would be greatly appreciated!
//HTML
<table>
<tr ng-repeat="item in viaPoints">
<td>
<p class="title-icon form-label">VIA LOCATION {{$index + 1}}</p>
<button style="bottom: -3px;" class="transparent position pull-right" ng-click="removeViaPoint($index)">
<img src="images/icons/close-14.png">
</button>
<input class="form" id="drop-off" type="text" value="{{x}}" ng-model="item.val">
</td>
</tr>
</table>
<button class="add" ng-click="addViaPoint()">+ ADD MORE LOCATIONS</button>
<button class="okay okay-full">OKAY</button>
//Angular
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
//Via Point Objects
$scope.viaPoints = [
{val:"Hanoi"}
]
//Push Via Points
$scope.addViaPoint = function () {
$scope.viaPoints.push("val:''");
}
//Remove Via Point
$scope.removeViaPoint = function (x) {
$scope.viaPoints.splice(x, 1);
}
});