代码之家 › 专栏 › 技术社区 › Malaiselvan

动态创建选择框并赋值

angular-ngmodel angularjs javascript

Malaiselvan · 技术社区 · 5 年前

内置angular应用程序。js我动态地将多个选择框放置在一个具有唯一id的表单中。如何在控制器内的这些选择框上获得所选的值。

添加了一个变量

$scope.sibling_type = {};

加载选择框的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;
}

单击按钮将调用上面的脚本,每次从该按钮加载变量“sibling”时都会使用不同的“id”。假设它已被调用两次,id分别为“23”和“24”。将有两个选择框,分别为“兄弟姐妹类型”23和“兄弟姐妹类型”24。

提交按钮

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

如何绑定/分配选项值,以便在提交表单时,我可以在Laravel controller内的选择框中获取所选选项。

1 回复 | 直到 5 年前

palaÑÐ½ 5 年前

对此,您可以使用不同的方法:

在控制器内创建一个新的“兄弟姐妹类型”作用域。
```
$scope.sibling_type = {};
```

接下来,更新 ng-model 对于内部的所有动态选择 linkSiblingFinish 比如:

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

现在,当表单提交时,您可以在这些选择框中获得所选选项。比如:

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>