I have a specific issue with accessing the value of dynamically created input text in my web form. The problem arises when using ngRepeat to manage items, particularly with $scope.newValueItem being undefined. How can I retrieve the value from dynamically generated input fields?
HTML
<form role="form" name="itemsManagementRrnForm">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-6" data-ng-repeat="(formControllerKey,formControllerValue) in displayModel track by $index">
<div class="panel panel-default">
<div class="panel-heading">{{formControllerKey}}</div>
<div class="panel-body">
<div style="overflow-y: scroll; height:400px;">
<ul>
<li data-ng-repeat="formControllerValue in formControllerValue track by $index" data-ng-hide="formControllerValue.deleted">
<div id="showItem" data-ng-show="!displayModel[formControllerKey][$index].editingMode">
<input class="" type="submit" value="Edit" data-ng-click="toggleEdit(formControllerKey,$index)">
<input class="" type="submit" value="Delete" data-ng-click="deleteValue(formControllerKey,$index)">
<label>{{formControllerValue.formControllerValueName}}</label>
</div>
<div id="editItem" data-ng-show="displayModel[formControllerKey][$index].editingMode">
<input class="" type="submit" value="update" data-ng-click="updateValue(formControllerKey,$index)">
<input class="" type="submit" value="Cancel" data-ng-click="cancel(formControllerKey,$index)">
<input type="text" size="30" data-ng-model="formControllerValue.formControllerValueName" placeholder="add new here">
</div>
</li>
</ul>
</div>
<div>
<input class="" type="submit" value="add" data-ng-click="addValue(formControllerKey,formControllerValue[$index].formControllerID,$index)">
<input type="text" size="30" data-ng-model="newValueItem" placeholder="add new here">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
JS
(function () {
'use strict';
var app = angular.module('athena');
var ItemsManagementRrnFormController = function ($scope, $location, authService, userInfoService, itemsManagementRrnFormService) {
var username = '';
$scope.addValue = function (formControllerKey, parentId,index) {
$scope.model = formValueModelTemplate();
$scope.model.formControllerID = parentId;
$scope.model.createdBy = username;
$scope.model.CreatedOn = new Date();
$scope.model.modifiedBy = username;
$scope.model.modifiedOn = new Date();
$scope.model.formControllerValueName = $scope.newValueItem;
$scope.displayModel[formControllerKey].push($scope.model);
itemsManagementRrnFormService.postValue($scope.model);
$scope.newValueItem = '';
};
};
app.controller('ItemsManagementRrnFormController', ['$scope', '$location', 'authService', 'userInfoService', 'itemsManagementRrnFormService', ItemsManagementRrnFormController]);
}());