Generate Select dropdown menus and set their values dynamically

Question

Generate Select dropdown menus and set their values dynamically

Within the angular app.js file, I am dynamically populating a form with multiple select boxes, each having a unique id. How can I retrieve the selected values from these select boxes within the controller?

A variable has been added:

$scope.sibling_type = {};

Javascript code for loading the select box:

$scope.linkSiblingFinish = function(sibling){
   var str_siblingtype = "<div class='col-sm-2' style='margin-bottom:15px'>" +
     "<select ng-model='sibling_type[" + sibling.id + "]' class='form-control' id='sibling_type_"+sibling.id+"'>" +
       "<option class='ng-binding ng-scope' value='1'>Sister->Brother</option>" +
       "<option class='ng-binding ng-scope' value='2'>Brother->Sister</option>" +
       "<option class='ng-binding ng-scope' value='3'>Sister->Sister</option>" +
       "<option class='ng-binding ng-scope' value='4'>Brother->Brother</option>" +
     "</select></div>";

    document.getElementById('div_siblings').innerHTML = str_siblingtype;
}

The above script will be executed on a button click, passing a different 'id' to the 'sibling' parameter every time it is called. Assuming it's called twice with the ids '23' and '24', two select boxes will be created: 'sibling_type_23' and 'sibling_type_24'.

For the submit button:

$scope.saveSibling = function(data){
    dataFactory.httpRequest('index.php/students/sibling/'+$scope.form.id,'POST',{},$scope.form).then(function(data) {
    });
}

How can I bind/assign the option values so that when the form is submitted, I can access the selected options from those select boxes within the Laravel controller?

javascript angularjs angular-ngmodel

Answer 1

Answer №1

Here's a unique method you can try:

Start by setting up a new 'sibling_type' scope in your controller.
```
$scope.sibling_type = {};
```

Then, adjust the ng-model for all dynamic selects within linkSiblingFinish as follows:

"<select ng-model='sibling_type[" + sibling.id + "]' 
         class='form-control' id='sibling_type_"+sibling.id+"'>" +

Upon form submission, retrieve the chosen options from these select boxes like this:

var sibling_type_23 = $scope.sibling_type['23'];
var sibling_type_24 = $scope.sibling_type['24'];

See it in action here:

const app = angular.module('myApp', []);
app.controller('AppCtrl', function ($scope) {
  $scope.siblings = [{id: 23,name: 'Sibling 23'},{id: 24,name: 'Sibling 24'}];
  $scope.sibling_type = {};
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="AppCtrl">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tr ng-repeat="sibling in siblings">
        <td>{{sibling.name}}:</td>
        <td><input type="text" ng-model="sibling_type[sibling.id]" placeholder='Type here..' /></td>
      </tr>
    </table>
    <pre>{{sibling_type | json }}</pre>
  </div>
</div>

Answer 2

Here's a unique method you can try:

Start by setting up a new 'sibling_type' scope in your controller.
```
$scope.sibling_type = {};
```

Then, adjust the ng-model for all dynamic selects within linkSiblingFinish as follows:

"<select ng-model='sibling_type[" + sibling.id + "]' 
         class='form-control' id='sibling_type_"+sibling.id+"'>" +

Upon form submission, retrieve the chosen options from these select boxes like this:

var sibling_type_23 = $scope.sibling_type['23'];
var sibling_type_24 = $scope.sibling_type['24'];

See it in action here:

const app = angular.module('myApp', []);
app.controller('AppCtrl', function ($scope) {
  $scope.siblings = [{id: 23,name: 'Sibling 23'},{id: 24,name: 'Sibling 24'}];
  $scope.sibling_type = {};
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="AppCtrl">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tr ng-repeat="sibling in siblings">
        <td>{{sibling.name}}:</td>
        <td><input type="text" ng-model="sibling_type[sibling.id]" placeholder='Type here..' /></td>
      </tr>
    </table>
    <pre>{{sibling_type | json }}</pre>
  </div>
</div>

Generate Select dropdown menus and set their values dynamically

Answer №1

Similar questions

The jQuery ajax request hangs indefinitely without triggering success or error callbacks

What is the process for creating a symbolic link from a project's node_modules directory?

Guide to shuffling an array with a simple click of a button

The delay in loading HTML content using FOSJsRoutingBundle and Ajax for a specific route parameter (ID)

Sending information from Vue to Express for processing

JS if clause fails to return true as expected

When I trigger a click event, it doesn't return anything, however, the function works perfectly when I execute a load event

Tips for accessing child elements of a select tag after dynamically loading option tags using ajax

Bidirectional data binding in the Vue 3 composition API

Clear SELECT After Submission

Discovering the active controllers in current AngularJS implementation

Utilize the Feefo JSON data and convert it to a JavaScript array for rendering as an HTML

Cleaning up unwanted objects in THREE.js webGL

Removing the pound sign from the URL in location hash

Exploring the concept of promises in node.js for recursive functions

Using Jquery to duplicate a row from one table and insert it into another table

A warning message has been triggered: 'Script Alert Error - Object

Tips for clearing a text box on an AngularJS page when clicking a link within the page

What is the best way to determine the location of just one element?

Transferring a PHP variable to a different PHP script through AJAX