sowmyaa guptaa sowmyaa guptaa - 7 days ago 5
AngularJS Question

Send data from dynamic textbox in view to AngularJS controller

I have a drop down list and when the user chooses any option from the drop down list, a text box appears for each selection.
HTML-

<select id="nut">
<option>---select---</option>
<option value="N1">N1</option>
<option value="N2">N2</option>
<option value="N3">N3</option>
<option value="N4">N4</option>
</select>
<div id="holder"></div>
<input type="submit" value="save" ng-click="savedata()"/>


Javascript-

$("#nut").change(function () {
val = $(this).val();
var ctr = '<input type="text" name="' + val + '"/>';
$('#holder').append(ctr);
});


Now i want to insert value of all these text boxes in new row in the database using the AngularJS controller on clicking the save button.

I know how to do this for normal form elements by binding the form element data using data-ng-model. But how to achieve this when no. of form elements is variable.

I tried doing this,

var ctr = '<input type="text" name="data.' + val + '" data-ng-model="data.' + val + '"/>';

<input type="submit" data-ng-click="savedata(data)"/>


AngularJS controller-

.controller('testController', function ($scope, $http, $location) {
$scope.savedata = function (data) {
debugger;
alert($scope.data);
}
})


But this gives the value of data as undefined.
So what else can be done?

Answer

Using the data driven approach of AngularJS and moving away from the jQuery approach to the problem. You can follow the solution below.

Lets look at your problem first.

  1. You a have list of labels/tags to be displayed.
  2. Text entered by the user has to be associated with the tag/label selected by the user in the select option
  3. Text Input field is not to be shown if no option from the select menu has been selected
  4. Once the user selects a label and enter the corresponding tag, and presses Submit. You want to save the data to your back-end/database.

Let's create a clean solution for this.

We will first work on the controller for this and setup our variables and models required.

angular.controller('testController',['$scope','$http','$location',function($scope,$http,$location){

  $scope.optionsList = ['N1','N2','N3','N4','N5']; //List of options to be displayed in select
  $scope.selectedOption = 'Select Tags'; //Variable to store the selected option      
  $scope.textFilled = ''; //this model will store the text entered by the user
  $scope.showTextField = false;// this model will decide when to show the text-field

  $scope.switchTextFieldStates = function(){
      if($scope.selectOptions != 'Select Tags'){
        $scope.showTextFields = true;
      }else {
        $scope.showTextFields = false;
      }
      $scope.textFilled = ''; //This will ensure that if user changes the option then previously filled data is cleared out of the model
  }

  $scope.saveData = function(){

      console.log($scope.selectedOption,$scope.textFilled);
//Do whatever you want to do here with the data you got
 //Reset the state of the view 
      $scope.showTextFields = false;
      $scope.textFillled = '';
      $scope.selectedOptions = 'Select Tags';
 }

}];

Lets create a suiting HTML template for the problem.

<select ng-options="item as item in optionsList" ng-model="selectedOption" ng-change="switchTextFieldStates()"></select>

<div id="holder" ng-show="showTextFields"><input type="text" ng-model="textFilled"/></div>
<input type="submit" ng-click="saveData()"/>