使用 ng-model 数组复制 html 元素时出错

Question

我在使用 angular 指令复制 select 元素并在 ng-model 中包含的数组中添加新索引时遇到问题。

举例说明：

我的html代码

    <div class="col-sm-12">
        <div class="col-sm-6">
            <select name="perfil_cliente[]" class="form-control" required ng-model="trava.composicao['{{vm.composicaoBloco}}'].perfil_cliente">
                <option value="" selected>Selecione o perfil desejado</option>
                <option ng-value="entidadePerfil.id" ng-repeat="entidadePerfil in vm.entidadesPerfis">{{entidadePerfil.nome | uppercase}}</option>
            </select>
        </div>
        <div class="col-sm-5">
            <select name="plano[]" class="form-control" required ng-model="trava.composicao['{{vm.composicaoBloco}}'].plano">
                <option value="" selected>Selecione o plano desejado</option>
                <option ng-value="plano.id" ng-repeat="plano in vm.planos">{{plano.nome | uppercase}}</option>
            </select>
        </div>
        <div class="col-sm-1">
            <button duplicate-row type="button" class="btn btn-success pull-right" value="container-composicao-desconto" ng-init="vm.composicaoBloco = vm.composicaoBloco + 1">
                <i class="fa fa-plus" aria-hidden="true" ></i>
            </button>
        </div>
    </div>

    <div class="row-elements">
        <div class="row fix-row-padding">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <select name="perfil_usuario[]" class="form-control" required ng-model="trava.composicao['{{vm.composicaoBloco}}'].dados_trava['{{vm.composicaoLinha}}'].perfil_usuario">
                        <option value="" selected>Selecione o perfil de usuário</option>
                        <option ng-value="usuarioPerfil.id" ng-repeat="usuarioPerfil in vm.usuariosPerfis">{{usuarioPerfil.nome | uppercase}}</option>
                    </select>
                </div>
                <div class="col-sm-5">
                    <input type="number" name="valor_desconto[]" class="form-control descontos" placeholder="Valor do Desconto" required min="0" max="100" ng-model="trava.composicao['{{vm.composicaoBloco}}'].dados_trava['{{vm.composicaoLinha}}'].valor_desconto"/>
                </div>
                <div class="col-sm-1">
                    <button type="button" duplicate-row class="btn btn-success pull-right invert-controls" value="" style="padding-left: 13.5px; padding-right: 13.5px;" ng-init="vm.composicaoLinha = vm.composicaoLinha + 1">
                        <i class="fa fa-level-down" aria-hidden="true" ></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

我的指令代码

.directive("duplicateRow", function ($compile) {
        return {
            restrict: "A",
            link: function (scope, element, attr) {
                element.on('click', function () {

                    var row = element.closest('.row').first();
                    var linha = row.html();
                    console.log(linha);
                    if (linha.indexOf('invert-controls') !== -1) {
                        linha = linha.replace("fa-plus", "fa-minus").replace("duplicate-row", "remove-row").replace("btn-success", "btn-danger");
                    }

                    var elemento = angular.element('<div class="row fix-row-padding">' + linha + '</div>');

                    elemento.insertAfter(row);

                    $compile(elemento)(scope);
                });
            }
        }
    })

我收到的回复是这个

我收到的第二个 'composicao' 密钥是 {{vm.composicaoBloco}}。我在这里搜索了一些问题，但仍然没有找到答案。有人可以帮我解决这个问题吗？或者告诉我我在做什么 worng！

谢谢大家

Answer 1

不正确：

trava.composicao['{{vm.composicaoBloco}}']

正确：

trava.composicao[vm.composicaoBloco]

编辑：

一切都做得很奇怪

我会这样做：

HTML（很可能丢失了一些包装标签）

<div ng-repeat-begin="composicao in trava.composicao" class="col-sm-12">
    <div class="col-sm-6">
        <select name="perfil_cliente[]" class="form-control" required ng-model="composicao.perfil_cliente">
            <option value="" selected>Selecione o perfil desejado</option>
            <option ng-value="entidadePerfil.id" ng-repeat="entidadePerfil in vm.entidadesPerfis">{{entidadePerfil.nome | uppercase}}</option>
        </select>
    </div>
    <div class="col-sm-5">
        <select name="plano[]" class="form-control" required ng-model="composicao.plano">
            <option value="" selected>Selecione o plano desejado</option>
            <option ng-value="plano.id" ng-repeat="plano in vm.planos">{{plano.nome | uppercase}}</option>
        </select>
    </div>
    <div class="col-sm-1">
        <button type="button" class="btn btn-success pull-right" value="container-composicao-desconto" ng-click="vm.addComposicao()" ng-if="$last">
            <i class="fa fa-plus" aria-hidden="true" ></i>
        </button>
        <button type="button" class="btn btn-danger pull-right" value="container-composicao-desconto" ng-click="vm.removeComposicao($index)" ng-if="!$last">
            <i class="fa fa-minus" aria-hidden="true" ></i>
        </button>
    </div>
</div>

<div ng-repeat-end class="row-elements">
    <div class="row fix-row-padding" ng-repeat="dadosTrava in composicao.dados_trava">
        <div class="col-sm-12">
            <div class="col-sm-6">
                <select name="perfil_usuario[]" class="form-control" required ng-model="dadosTrava.perfil_usuario">
                    <option value="" selected>Selecione o perfil de usuário</option>
                    <option ng-value="usuarioPerfil.id" ng-repeat="usuarioPerfil in vm.usuariosPerfis">{{usuarioPerfil.nome | uppercase}}</option>
                </select>
            </div>
            <div class="col-sm-5">
                <input type="number" name="valor_desconto[]" class="form-control descontos" placeholder="Valor do Desconto" required min="0" max="100" ng-model="dadosTrava.valor_desconto"/>
            </div>
            <div class="col-sm-1">
                <button type="button" duplicate-row class="btn btn-success pull-right invert-controls" value="" style="padding-left: 13.5px; padding-right: 13.5px;" ng-click="vm.addDadosTrava()" ng-if="$last">
                    <i class="fa fa-plus" aria-hidden="true" ></i>
                </button>
                <button type="button" duplicate-row class="btn btn-danger pull-right invert-controls" value="" style="padding-left: 13.5px; padding-right: 13.5px;" ng-click="vm.removeDadosTrava()" ng-if="$last">
                    <i class="fa fa-minus" aria-hidden="true" ></i>
                </button>
            </div>
        </div>
    </div>
</div>

Angular 控制器：

vm.addComposicao = function () {
    trava.composicao.push({
        dados_trava: [{}]
    });
};

vm.removeComposicao = function (index) {
    trava.composicao.splice(index, 1);
};

vm.addDadosTrava = function (composicaoIndex) {
    if (!trava.composicao[composicaoIndex]) {
        return;
    }

    trava.composicao[composicaoIndex].dados_trava.push({});
};

vm.removeDadosTrava = function (composicaoIndex, dadosTravaIdnex) {
    trava.composicao[composicaoIndex].dados_trava.splice(dadosTravaIdnex, 1)
};

试着这样想。

使用 ng-model 数组复制 html 元素时出错

Error on duplicating html element with ng-model array

javascript

frontend

angularjs

angularjs-directive