动态创建选择框并赋值

Question

Inside angular app.js I am dynamically placing multiple select box in a form with a unique id. How can is get the values selected on those select boxes inside the controller.

Added a variable

$scope.sibling_type = {};

Javascript code to load 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 called on a button click from where the variable 'sibling' will be loaded with different 'id' every time. Assume it has been called for 2 times with the id as '23' and '24'. There will be 2 select boxes as 'sibling_type_23' and 'sibling_type_24'.

On submit button

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

How do I bind/assign the option values so that when the form is submitted I can get the selected options on those select boxes inside Laravel controller.

Answer 1

You can use a different approach for this:

1. Create a new 'sibling_type' scope inside your controller.

    $scope.sibling_type = {};

2. Next, update the ng-model for all dynamic selects inside linkSiblingFinish like:

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

3. Now, when the form is submitted you can get the selected options on those select boxes. like:

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

DEMO:

 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>