使用ng-model數組複製html元素時出錯

Question

我無法用角度指令複製select元素，並在ng模型中包含的數組中添加新索引。

爲了舉例說明：

我的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}}。 我在這裏搜索一些問題，但仍未找到答案。任何人都可以幫我解決這個問題嗎？或者告訴我我在做什麼工作！

謝謝你們」

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> 

角控制器：

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

嘗試這樣想。