I have a problem with my ng-repeat directive inside my angular application. I know that by now a big portion of developers have switched to the new angular versions and probably ported their applications to the new standard, but I have a fairly huge client that is supposed to communicate with a RESTful backend.
Needless to say porting it would defeat the purpose, and I am not experienced enough to make meaningful tradeoffs when it comes to the new vs. the old standard, so I will have to work with the old version of angular. Here is my form + validation inside the html view:
<fieldset data-ng-repeat="banca in banci">
<legend>
Conturi bancare
</legend>
<ng-form name="userFieldForm">
<div class="form-group" ng-class="{'has-error':userFieldForm['contbanca' + $index].$dirty && userFieldForm['contbanca' + $index].$invalid, 'has-success':userFieldForm['contbanca' + $index].$valid}">
<div class="col-md-4">
<label class="control-label">
Cont banca {{$index + 1}}
<span class="symbol required"></span>
</label>
<input type="text" placeholder="Nr. Cont..." class="form-control" name="contbanca{{$index}}" ng-model="myModel.['contbanca' + $index]"
ng-pattern="/[a-zA-Z0-9]{24}/" required/>
<span class="error text-small block" ng-if="userFieldForm.['contbanca' + $index].$dirty && userFieldForm.['contbanca' + $index].$error.required">Va rugam inserati numarul de cont!</span>
<span class="error text-small block" ng-if="userFieldForm.['contbanca' + $index].$error.pattern">Numarul de cont trebuie sa aiba 24 de caractere alfanumerice!</span>
<span class="success text-small block" ng-if="userFieldForm.['contbanca' + $index].$valid">Contul este valid!</span>
</div>
</div>
<div class="form-group" ng-class="{'has-error':userFieldForm.banca.$dirty && userFieldForm.banca.$invalid, 'has-success':userFieldForm.banca.$valid}">
<div class="col-md-4">
<label for="form-field-select-1">
Banca
<span class="symbol required"></span>
</label>
<select class="form-control" name="banca" ng-model="myModel.banca" required>
<option value="" disabled selected>Selectati banca </option>
<option value="AlphaBank">Alpha Bank</option>
<option value="AngloRomanianBank">Anglo-Romanian Bank</option>
<option value="ATEBank">ATE Bank</option>
<option value="BancaCRFirenze">Banca C.R. Firenze</option>
<option value="BancaComercialaCarpatica">Banca Comerciala Carpatica</option>
<option value="EximBank">Exim Bank</option>
<option value="BancaDiRoma">Banca Di Roma</option>
<option value="BancaItaloRomena">Banca Italo Romena</option>
<option value="BancaRomaneasca">Banca Romaneasca</option>
<option value="BancaTransilvania">Banca Transilvania</option>
<option value="Bancpost">Bancpost</option>
<option value="BCR">BCR</option>
<option value="BRD">BRD - Groupe Societe Generale</option>
<option value="CEC">CEC Bank</option>
<option value="CitiBank">Citibank</option>
<option value="CreditEuropeBank">Credit Europe Bank</option>
<option value="EgnatiaBank">Egnatia Bank</option>
<option value="EmporikiBank">Emporiki Bank</option>
<option value="GarantiBank">Garanti Bank</option>
<option value="HVBLocuinte">HVB Locuinte</option>
<option value="INGBank">ING Bank</option>
<option value="LaCaixa">La Caixa</option>
<option value="LeumiBank">Leumi Bank</option>
<option value="LibraBank">Libra Bank</option>
<option value="MarfinBank">Marfin Bank</option>
<option value="MilleniumBank">Millenium Bank</option>
<option value="MKBRomexterraBank">MKB Romexterra Bank</option>
<option value="OTPBank">OTP Bank</option>
<option value="PiraeusBank">Piraeus Bank</option>
<option value="PorscheBank">Porsche Bank</option>
<option value="ProCreditBank">Pro Credit Bank</option>
<option value="RaifaissenBank">Raifaissen Bank</option>
<option value="RaifaissenLocuinte">Raifaissen Locuinte</option>
<option value="RBS">RBS</option>
<option value="RomanianInternationalBank">Romanian International Bank</option>
<option value="SanpaoloImiBank">Sanpaolo Imi Bank</option>
<option value="UniCreditTiriacBank">Unicredit Tiriac Bank</option>
<option value="Volksbank">Volksbank</option>
</select>
<span class="error text-small block" ng-if="userFieldForm.banca.$dirty && userFieldForm.banca.$error.required">Va rugam selectati banca.</span>
<span class="success text-small block" ng-if="userFieldForm.banca.$valid">Banca selectata!</span>
</div>
</div>
<div class="form-group" ng-class="{'has-error':userFieldForm.contbanca.$dirty && userFieldForm.contbanca.$invalid, 'has-success':userFieldForm.contbanca.$valid}">
<div class="col-md-3">
<label for="form-field-select-1">
Banca
<span class="symbol required"></span>
</label>
<select class="form-control" name="banca" ng-model="myModel.banca" required>
<option value="" disabled selected>Selectati moneda </option>
<option value="LEI">LEI</option>
<option value="EURO">EURO</option>
<option value="USD">USD</option>
</select>
<span class="error text-small block" ng-if="userFieldForm.banca.$dirty && userFieldForm.banca.$error.required">Va rugam selectati banca.</span>
<span class="success text-small block" ng-if="userFieldForm.banca.$valid">Banca selectata!</span>
</div>
</div>
<div class="col-md-1" style="margin-top: 22px;">
<input type="button" value="X" class="btn btn-danger" ng-click="removeChoice()" />
</div>
</ng-form>
</fieldset>
My problem is that inside the ng-repeat, I am trying to make use of the $index variable to dynamically update the view bound to the variables whenever I press the button to make another form appear in the page, kinda like an dynamic form element.
I have been using the examples in this stackoverflow post, specifically using the 2nd answer as it provided me with all that I needed.
I am also trying to use it to dynamically give each element validation. My problem is with this line:
<div class="form-group" ng-class="{'has-error':userFieldForm['contbanca' + $index].$dirty && userFieldForm['contbanca' + $index].$invalid, 'has-success':userFieldForm['contbanca' + $index].$valid}">
Accessing $index inside ng-class seems to not work as expected. If I turn this off, the validation for all the forms will be the exact same, and each individual dynamic form will not be individually validated as it is intended to be, however if I keep it on the validation does not work anymore.
This is the portion of my controller that I use to populate the dynamic forms, aswell as the methods for adding and removing elements dynamically:
app.controller('ValidationCtrl', ["$scope", "$state", "$timeout", "SweetAlert", function ($scope, $state, $timeout, SweetAlert) {
$scope.banci = [{ id: '1' }, { id: '2' }];
$scope.addNewChoice = function () {
if ($scope.banci.length === 6) {
return;
}
else {
var newItemNo = $scope.banci.length + 1;
$scope.banci.push({ 'id': +newItemNo });
}
};
$scope.removeChoice = function () {
var lastItem = $scope.banci.length - 1;
$scope.banci.splice(lastItem);
};
I am fairly new to angularjs, and I have been given this big project that I am struggling to understand, so please excuse my wording as I am not entirely familiar with the angularjs jargon yet. Thanks for the support in advance!
