Question

我使用 AngularJS 将表单绑定到Java Script对象，简单的文本输入或复选框的方式随时关联。

问题是当我想在我的主对象中拥有一个具有多个属性的对象数组时，这些对象是动态添加的，换句话说，可以添加更多对象，因此{{ 1}}元素输入它们的属性。

我编码this site：

这些是将对象添加到数组的位置：

enter image description here

整行相当于一个对象 html ，所以 Posgrado ， Especialidad 和 Título 是它的属性。

单击 Cédula 按钮可添加一个输入行（另一个对象）。可以在这里看到：

enter image description here

每一个都在Añadir，一组物体。

我如何使用Angular：

管理添加更多输入行。

将每个输入行绑定到一个对象并将其推送到数组。

最后，将数组绑定到professional.data.postgraduates。

到目前为止，唯一的线索是为这些对象使用额外的 professional.data.postgraduates ，并且可能使用了一些 Controller 指令。

在这里，我得到了我的整个模块和标记：

ng-init

以下是上述问题中提到的标记：

(function() {


        var app = angular.module('PsicologosRegister', ['checklist-model'])

        app.controller('PsicologoController', function() {

            this.psycho = psicologo

            this.print = function() {

                console.log(this.psycho)
            }
        })

        app.controller('PersonalDataController', function() {

            this.data = datos_Personales

        })

        app.controller('ProfessionalDataController', function() {

            this.data = datos_Profesionales
        })

        app.controller('ProfessionalInterestsController', function() {

            this.data = intereses_Profesionales
        })              



        var datos_Personales = {}
        var datos_Profesionales = {}
        var intereses_Profesionales = {}

        var psicologo = {

                            datosPersonales:            datos_Personales,
                            datosProfesionales:         datos_Profesionales,
                            interesesProfesionales:     intereses_Profesionales
        }
})()

<div class="container" id="seccionRegistro1" ng-controller="PersonalDataController as personal">
<form class="form-horizontal" role="form">

<div class="form-group">
    <label for="inputNombre" class="col-xs-2 control-label">Nombre(s)</label>
    <div class="col-xs-10">
      <input type="text" class="form-control" id="inputNombre" placeholder="Nombre(s)" ng-model="personal.data.name" >

    </div>
</div>

<div class="form-group">
    <label for="inputApellidos" class="col-xs-2 control-label">Apellidos</label>
    <div class="col-xs-10">
      <input type="text" class="form-control" id="inputApellidos" placeholder="Apellidos" ng-model="personal.data.lastname">
    </div>
</div>

<div class="form-group">
    <label for="inputEdad" class="col-xs-2 control-label">Edad</label>
    <div class="col-xs-10">
      <input type="text" class="form-control" id="inputEdad" placeholder="Edad" ng-model="personal.data.age">
    </div>
</div>

    <div class="form-group">
    <label for="inputTel" class="col-xs-2 control-label">Teléfono</label>
    <div class="col-xs-10">
      <input type="text" class="form-control" id="inputTel" placeholder="Teléfono" ng-model="personal.data.phone">
    </div>
</div>

<div class="form-group">
    <label for="inputCel" class="col-xs-2 control-label">Celular</label>
    <div class="col-xs-10">
      <input type="text" class="form-control" id="inputCel" placeholder="Celular" ng-model="personal.data.mobile">
    </div>
</div>

<div class="form-group">
    <label for="inputMail" class="col-xs-2 control-label">e-mail</label>
    <div class="col-xs-10">
      <input type="email" class="form-control" id="inputMail" placeholder="e-mail" ng-model="personal.data.email">
    </div>
</div>  

<div class="form-group">
    <label for="inputFB" class="col-xs-2 control-label">Facebook</label>
    <div class="col-xs-10">
      <input type="text" class="form-control" id="inputFB" placeholder="Facebook" ng-model="personal.data.fb">
    </div>
</div>

<div class="form-group">
    <label for="inputDireccion" class="col-xs-2 control-label">Dirección</label>
    <div class="col-xs-10">
      <input type="text" class="form-control" id="inputDireccion" placeholder="Dirección" ng-model="personal.data.address">
    </div>
</div>

Answer 1

在Angular中，这比你目前的做法要容易得多。

创建一个控制器并定义选择列表的选项，并填充一系列研究生（我硬编码了一些，你最有可能从数据库中提取这些）。添加一个函数来创建一个新的研究生对象并将其推送到数组中。

app.controller('ProfessionalDataController', function($scope) {

  $scope.tipos = [
    'Especialidad',
    'Maestría',
    'Doctorado'
    ];

  $scope.posgrados = [];   

 //If you wanted to assign records from a database, you could do it here.
 //$scope.posgrados = [
 // {tipo: 'Especialidad', titulo: 'titulo 1', cedula: 'cedula 1'},
 // {tipo: 'Maestría', titulo: 'titulo 2', cedula: 'cedula 2'},
 // {tipo: 'Doctorado', titulo: 'titulo 3', cedula: 'cedula 3'}
 //  ];

 $scope.addPosgrado = function(){
  var posgrado = {tipo: 'Especialidad', titulo: 'titulo', cedula: 'cedula'};
  $scope.posgrados.push(posgrado);
 }

在您的视图中，您可以创建一个表并迭代研究生数组，为每个研究生创建一行。用一个按钮来调用你的addPosgrado函数。

<body ng-controller="ProfessionalDataController">
  <table>
    <thead>
      <tr>
        <th>Tipo</th>
        <th>Titulo</th>
        <th>Cedula</th>
      </tr>
    </thead>
    <tr data-ng-repeat="p in posgrados">
      <td><select ng-options="t for t in tipos" ng-model="p.tipo"></select></td>
      <td><input type="text" ng-model="p.titulo"/></td>
      <td><input type="text" ng-model="p.cedula"/></td>
    </tr>
  </table>
  <button ng-click="addPosgrado()">Añadir</button>    
</body>

这是Plunker

如何使用AngularJS将对象数组及其属性绑定到多个html输入？

1 个答案: