Question

我正在开发一个HTML格式的数据回忆视图，我发现需要创建这样的东西：

enter image description here

我解释说，这是一个糟糕的油漆图像，所以，有一个输入，用户可以引入数据，如果他点击＆＃34; +＆＃34;按钮它将出现另一个，只是具有相同的机制。

HTML中是否有任何元素可以自己创建？或者我应该自己创建它？

编辑：

我一直在按照角度教程开发表单并且我遇到了问题。这就是我的观点所示：

enter image description here

在标签hijos下方，它应该显示一个与dominio标签中的按钮相似的按钮。不知道为什么会发生这种情况。还有另一个问题。添加按钮应该在dominio标签的情况下添加输入，在hijos的情况下添加选择（如果正确显示）。目前它什么也没做。这是我写的代码。

HTML部分：

<section name="nuevoMovimiento" class="row-fluid">
<form class="form-horizontal text-left">
    <fieldset>
        <div id="legend">
            <legend class="">New entry table</legend>
        </div>
        <div class="row-fluid">
            <div class="col-md-4">
                <div class="control-group">
                    <label class="control-label" for="id">Identificador:</label>
                    <input type="text" id="id" class="input" name="id" placeholder="Introduzca el ID" ng-model="controlET.nuevaTE.id">
                </div>
                <div class="control-group">
                    <label class="control-label" for="desc">Descripción:</label>
                    <div class="controls">
                        <textarea id="desc" name="desc" class="textarea" placeholder="Escriba una breve descripción" ng-model="controlET.nuevaTE.descripcion">                                   
                        </textarea>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="tipo">Tipo:</label>
                    <select name="tipo" id="tipo" class="select" ng-options="" ng-model="controlET.nuevaTE.tipo"></select>
                </div>
                <div class="control-group">
                    <label class="control-label" for="tipo_vis">Tipo de visualización:</label>
                    <select name="tipo_vis" id="tipo_vis" class="select" ng-options="" ng-model="controlET.nuevaTE.tipo_visualizacion"></select>
                </div>
            </div>
            <div class="col-md-4">
                <div class="control-group">
                    <label class="control-label" for="visible">Visible</label>
                    <input type="radio" name="visible" id="visible" value="true" ng-model="controlET.nuevaTE.visible">Sí    
                    <input type="radio" name="visible" id="visible" value="false" ng-model="controlET.nuevaTE.visible">No
                </div>
                <div class="control-group">
                    <label class="control-label" for="valor">Valor:</label>
                    <input type="text" id="valor" class="input" name="valor" placeholder="Introduzca el valor" ng-model="controlET.nuevaTE.valor">
                </div>
                <div class="control-group">
                    <label class="control-label" for="enabled">Enabled:</label>
                    <input type="text" id="enabled" class="input" name="enabled" placeholder="Introduzca algo" ng-model="controlET.nuevaTE.enabled">
                </div>
                <div class="control-group">
                    <label class="control-label" for="obligatorio">Obligatorio:</label>
                    <input type="radio" name="obligatorio" id="obligatorio" value="true" ng-model="controlET.nuevaTE.obligatorio">Sí    
                    <input type="radio" name="obligatorio" id="obligatorio" value="false" ng-model="controlET.nuevaTE.obligatorio">No
                </div>
            </div>
            <div class="col-md-4">
                <div class="control-group">
                    <label class="control-label" for="dominio">Dominio:</label>
                    <div class="controls">
                        <ul class="unstyled">
                            <li ng-repeat="dominio in controlET.dominioRecollect">
                                <input type="text" ng-model="dominio.text">
                            </li>
                        </ul>
                        <form ng-submit="controlET.funciones.addDominio()">
                            <input class="btn-primary" type="submit" value="add">
                        </form>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="hijos">Hijos:</label>
                    <div class="controls">
                        <ul class="unstyled">
                            <li ng-repeat="hijos in controlET.hijosRecollect">
                                <select id="hijos" name="hijos" ng-options="te.id for te in controlET.TEs2" ng-model="hijos.id">
                            </li>
                        </ul>
                        <form ng-submit="controlET.funciones.addDominio()">
                            <input class="btn-primary" type="submit" value="add">
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-centered">
            <button style="margin-top: 20px" type="button" class="btn btn-lg btn-primary" ng-click="controlET.funciones.anadirTE()">
                <span>Guardar</span>
            </button>
        </div>
    </fieldset>
</form>
</section>

JS部分：

(function () {
var ControlETCtrl = function (ETFactory, $scope, $http, $window, $rootScope) {
    var scope = this;

    scope.titulo = "Entry tables list";

    scope.dominioRecollect = [];
    scope.hijosRecollect = [];

    scope.TEs = ETFactory.getTEs().success(function(data){
                                                scope.TEs = data;
                                                scope.TEs2 = data;
                                            });
    scope.TEs2 =[];
    scope.nuevaTE = {};

    scope.funciones = {};
    /*scope.funciones.cargarDatos = function () {
        console.log("Entra en cargarDatos()");
        $rootScope.$apply(function() {
            ETFactory.getTEs().success(function(data){
                                    scope.movimientos = data;
                               });
        });

    }*/
    scope.funciones.addDominio = function() {
        scope.dominioRecollect.push({});
    }
    scope.funciones.addHijo = function() {
        scope.hijosRecollect.push({});
    }
    scope.funciones.cambiarvalor = function () {
        ETFactory.cambiarvalor();
    }
    scope.funciones.anadirTE = function () {
        ETFactory.añadirNuevo(scope.nuevaTE);
    }
}
controlCajaApp.controller('ControlETCtrl', ['ETFactory', ControlETCtrl]);
}());

嗯，那有什么想法吗？

Answer 1

如果它的表单正在提交您，那么您可能需要查看PHP。

但是，如果你只是打算输入内容并且没有对数据做任何事情，你可以使用jQuery做这样的事情:( http://jsfiddle.net/11x1gq3z/3/）

$(function() {
    var lolDiv = $('#inputs');
    var i = $('#inputs p').size() + 1;
    var addone = '<p><label for="inputs"><input type="text" id="input" size="20" name="input_' + i +'" value="" placeholder="Another box" /></label> <a href="#" id="rembox">Remove</a></p>';

    $('#addbox').live('click', function() { //onclick of div "#addbox"
            $(addone).appendTo(lolDiv); //appends new box to lolDiv var
            i++; //counter
            return false;
    });

    $('#rembox').live('click', function() { 
            if( i > 2 ) {
                    $(this).parents('p').remove(); //removes <p> tags that the boxes are in
                    i--; //counter but minus this time
            }
            return false;
    });
});

然后是HTML（非常基本的）：

<h2><a href="#" id="addbox">Add another box</a></h2>
<div id="inputs"><p>
<label for="inputs">
<input type="text" id="input" size="20" name="input" value="" placeholder="This is your box, yo" /></label>
</p></div>

HTML未知元素，至少对我而言

1 个答案: