Error on duplicating html element with ng-model array

Question

I'm having trouble duplicating a select element with angular directives and adding a new index in the array contained in ng-model.

To exemplify:

My html code

My directive code

.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('' + linha + '');

                    elemento.insertAfter(row);

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

And the response that i'm receive is this one

The second 'composicao' key that i receive is {{vm.composicaoBloco}}. I search some questions here but still not found the answer. Can anybody help me to fix this? Or tell me what i'm doing worng!

Thanks guys"

Alexander Anikeev · Accepted Answer

Incorrect:

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

Correct:

trava.composicao[vm.composicaoBloco]

EDIT:

Everything is done very strangely.

I would do something like this:

HTML (most likely lost some wrap tags)

Angular Controller:

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

Try to think in this way.

Error on duplicating html element with ng-model array

Answers (1)

Related Questions