Looking to add dynamically generated buttons to my Ionic app, I came across the following code snippet that seems perfect for the job.
The initial portion of the code was placed within the home.html file in the HTML body.
<div ng-controller="MyCtrl">
<div class="list list-inset">
<div class="item-input" ng-repeat="input in inputs">
<label class="item-input-wrapper">
<input type="text" placeholder="Enter text here" ng-model="input.value" />
</label>
<button class="button button-small button-balanced" ng-if="$index == inputs.length - 1" ng-click="addInput()">
<i class="icon ion-plus"></i>
</button>
<button class="button button-small button-assertive" ng-if="$index != inputs.length - 1" ng-click="removeInput($index)">
<i class="icon ion-minus"></i>
</button>
</div>
</div>
The remaining part of the code was then inserted into the home.ts file. My attempt was to include this section of the code within the main class.
var app = angular.module('myApp', []);
app.controller("MyCtrl", function($scope) {
$scope.inputs = [{
value: null
}];
$scope.addInput = function() {
console.log("new input");
$scope.inputs.push({
value: null
});
}
$scope.removeInput = function(index) {
$scope.inputs.splice(index, 1);
}
});
Encountering a "Typescript error," I find myself unable to define a specific variable:
var app = angular.module('myApp', []);
This challenge has stumped me, and I am hoping someone out there may have a solution or workaround to aid me in resolving this issue.