Tenho um form de Cadastro que possui, dentre outros, o seguinte campo:
<div id="Aditivo" class="col-xs-12 col-md-2">
@Html.LabelFor(model => model.NumeroAditivo, new { @class = "control-label" })
@Html.TextBoxFor(model => model.NumeroAditivo, new { @class = "form-control no-caps", @ng_readonly = "!m.Editavel" })
</div>
Que só deve ser exibido quando o Modelo (outro campo do meu form de Contrato) começar com "Aditivo".
Para isso, criei a seguinte função javascript:
function verificarAditivo() {
if ($("#ModeloId_chosen").text().startsWith("Aditivo")) {
$('#Aditivo').show();
$('#Numero').attr('class', 'col-xs-12 col-md-2');
}
else {
$('#Aditivo').hide();
$('#Numero').attr('class', 'col-xs-12 col-md-4');
}
}
A função verifica se o Modelo selecionado (ModeloId_chosen) começa com "Aditivo" para então exibir ou ocultar o campo criado.
Acontece que esta função também deve ser chamada assim que a página é carregada, para isso tentei usar:
$(document).ready(verificarAditivo)
e $(window).on("load", function () { verificarAditivo(); }
Mas ambos não me atenderam pois, quando chamam a função, a minha lista de Modelos...:
<div class="row">
<div class="col-xs-12 col-md-12">
@Html.LabelFor(model => model.ModeloId, new { @class = "control-label" })
@Html.DropDownListFor(model => model.ModeloId, defaultSelect, new
{
@class = "form-control chosen-select",
@data_url = @Url.Action("ListaModelo", "Modelo", new { modeloId = Model.ModeloId }),
@chosen = true,
@ng_options = "o.value as o.label group by o.group for o in options.ModeloId track by o.value",
@onchange = "verificarAditivo(); carregaComplemento('" + @Url.Action("Listar", "Complemento", new { contratoId = Model.ContratoId }) + "?modeloId=' + this.value);",
@ng_readonly = "!m.Editavel",
@ng_model = "v.ModeloId",
@chosen_scope = "m",
@ng_change = "alterarModelo();"
})
</div>
</div>
...ainda não foi preenchida. Ou seja, a função está sendo chamada cedo demais e ainda não há onde verificar se o Modelo começa com "Aditivo".
Só consegui "resolver" o problema usando um setTimeout, mas acredito que esta não seja a melhor solução.
Alguma ideia de como chamar a função que criei assim que a página estiver pronta mas com minha lista de Modelos já preenchida?
EDIT1: Também tentei com Angular:
$scope.alterarModelo = function () { verificarAditivo(); }
$scope.$on('$viewContentLoaded', function () { verificarAditivo(); });