动态创建选择框并分配值

Question

在angular app.js内部，我将多个选择框动态地放置在具有唯一ID的表单中。如何获得在控制器内部的那些选择框中选择的值。

用于加载选择框的JavaScript代码。

$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;
}

上面的脚本将在每次单击按钮时调用，每次都会从变量“兄弟姐妹”中加载不同的“ id”。假设它已经被调用了2次，其ID为'23'和'24'。将有2个选择框，分别是“ sibling_type_23”和“ sibling_type_24”。

我如何绑定/分配选项值，以便在提交表单时可以在Laravel控制器内的那些选择框中获得所选选项。

Answer 1

您可以为此使用其他方法：

1. 在控制器内创建一个新的'sibling_type'作用域。

   $scope.sibling_type = {};
   

2. [下一步，更新ng-model中所有动态选择的linkSiblingFinish，例如：

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

3. 现在，提交表单后，您可以在这些选择框中获得所选的选项。像：

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

演示：

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>