Digamos que você tenha um formulário com valores carregados do banco de dados. Como você inicializa o ng-model?
Exemplo:
<input name="card[description]" ng-model="card.description" value="Visa-4242">No meu controlador, $ scope.card é indefinido inicialmente. Existe uma maneira de fazer algo assim?
$scope.card = {
description: $('myinput').val()
}Respostas:
Este é um erro comum em novas aplicações angulares. Você não deseja gravar seus valores em seu HTML no servidor, se puder evitá-lo. De fato, se você pode evitar que seu servidor renderize HTML inteiramente, tanto melhor.
Idealmente, você deseja enviar seus modelos HTML angulares, puxe seus valores por $ http em JSON e coloque-os em seu escopo.
Portanto, se possível, faça o seguinte:
app.controller('MyController', function($scope, $http) {
$http.get('/getCardInfo.php', function(data) {
$scope.card = data;
});
});
<input type="text" ng-model="card.description" />Se você absolutamente DEVE renderizar seus valores em seu HTML a partir do seu servidor, você pode colocá-los em uma variável global e acessá-los com $ window:
No cabeçalho da sua página, você escreveria:
<head>
<script>
window.card = { description: 'foo' };
</script>
</head>E então, no seu controlador, você o faria assim:
app.controller('MyController', function($scope, $window) {
$scope.card = $window.card;
});Espero que ajude.
Se você não conseguir refazer o aplicativo para fazer o que o @blesh sugere (puxe os dados JSON para baixo com $ http ou $ resource e preencha o $ scope), use o ng-init em vez disso:
<input name="card[description]" ng-model="card.description" ng-init="card.description='Visa-4242'">Consulte também AngularJS - O atributo Value em uma caixa de texto de entrada é ignorado quando há um modelo ng usado?
ng-inité bastante útil ao definir valores de code-behind / postback <input name="phone" data-ng-model="frm.phone" data-ng-init="frm.phone= '<%: Model.Phone %>'" data-ng-pattern="/^[0-9() \-+]+$/" type="tel" required />. Um pouco feio? Sim, mas faz o truque e resolve uma dor de cabeça de integração no processo.
Esta é uma correção obviamente ausente, mas facilmente adicionada para o AngularJS. Basta escrever uma diretiva rápida para definir o valor do modelo no campo de entrada.
<input name="card[description]" value="Visa-4242" ng-model="card.description" ng-initial>Aqui está a minha versão:
var app = angular.module('forms', []);
app.directive('ngInitial', function() {
return {
restrict: 'A',
controller: [
'$scope', '$element', '$attrs', '$parse', function($scope, $element, $attrs, $parse) {
var getter, setter, val;
val = $attrs.ngInitial || $attrs.value;
getter = $parse($attrs.ngModel);
setter = getter.assign;
setter($scope, val);
}
]
};
});controllerpara sua diretiva e por que não usou o linkmétodo? Eu sou novato para AngularJS
val = $attrs.ngInitial || $attrs.value || $element.val()para que ele funcione com elementos selecionados.
IMHO, a melhor solução é a diretiva @Kevin Stone, mas tive que atualizá-la para funcionar em todas as condições (fe select, textarea), e esta está funcionando com certeza:
angular.module('app').directive('ngInitial', function($parse) {
return {
restrict: "A",
compile: function($element, $attrs) {
var initialValue = $attrs.value || $element.val();
return {
pre: function($scope, $element, $attrs) {
$parse($attrs.ngModel).assign($scope, initialValue);
}
}
}
}
});Você pode usar uma diretiva personalizada (com suporte para área de texto, seleção, rádio e caixa de seleção), confira esta postagem no blog https://glaucocustodio.github.io/2014/10/20/init-ng-model-from-form- campos-atributos / .
Eu tenho uma abordagem simples, porque tenho algumas validações e máscaras pesadas em meus formulários. Então, eu usei o jquery para obter meu valor novamente e acionar o evento "change" nas validações:
$('#myidelement').val('123');
$('#myidelement').trigger( "change");Como outros apontaram, não é uma boa prática inicializar dados nas visualizações. A inicialização dos dados nos controladores, no entanto, é recomendada. (consulte http://docs.angularjs.org/guide/controller )
Então você pode escrever
<input name="card[description]" ng-model="card.description">e
$scope.card = { description: 'Visa-4242' };
$http.get('/getCardInfo.php', function(data) {
$scope.card = data;
});Dessa forma, as visualizações não contêm dados e o controlador inicializa o valor enquanto os valores reais estão sendo carregados.
Se você gosta da abordagem de Kevin Stone acima, https://stackoverflow.com/a/17823590/584761, considere uma abordagem mais fácil escrevendo diretivas para tags específicas, como 'input'.
app.directive('input', function ($parse) {
return {
restrict: 'E',
require: '?ngModel',
link: function (scope, element, attrs) {
if (attrs.ngModel) {
val = attrs.value || element.text();
$parse(attrs.ngModel).assign(scope, val);
}
}
}; });Se você seguir esse caminho, não precisará se preocupar em adicionar ng-initial a cada tag. Ele define automaticamente o valor do modelo para o atributo value da tag. Se você não definir o atributo value, o padrão será uma sequência vazia.
Aqui está uma abordagem centrada no servidor:
<html ng-app="project">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
// Create your module
var dependencies = [];
var app = angular.module('project', dependencies);
// Create a 'defaults' service
app.value("defaults", /* your server-side JSON here */);
// Create a controller that uses the service
app.controller('PageController', function(defaults, $scope) {
// Populate your model with the service
$scope.card = defaults;
});
</script>
<body>
<div ng-controller="PageController">
<!-- Bind with the standard ng-model approach -->
<input type="text" ng-model="card.description">
</div>
</body>
</html>É a mesma ideia básica que as respostas mais populares sobre esta questão, exceto que $ allow.value registra um serviço que contém seus valores padrão.
Portanto, no servidor, você pode ter algo como:
{
description: "Visa-4242"
}E coloque-o na sua página através da tecnologia do servidor de sua escolha. Aqui está uma lista: https://gist.github.com/exclsr/c8c391d16319b2d31a43
Esta é uma versão mais genérica das idéias mencionadas acima ... Simplesmente verifica se existe algum valor no modelo e, se não, define o valor para o modelo.
JS:
function defaultValueDirective() {
return {
restrict: 'A',
controller: [
'$scope', '$attrs', '$parse',
function ($scope, $attrs, $parse) {
var getter = $parse($attrs.ngModel);
var setter = getter.assign;
var value = getter();
if (value === undefined || value === null) {
var defaultValueGetter = $parse($attrs.defaultValue);
setter($scope, defaultValueGetter());
}
}
]
}
}HTML (exemplo de uso):
<select class="form-control"
ng-options="v for (i, v) in compressionMethods"
ng-model="action.parameters.Method"
default-value="'LZMA2'"></select>$scopepara a chamada para getter()- espero que isso esclareça as coisas para qualquer pessoa que tente fazer isso!
Eu tentei o que @Mark Rajcok sugeriu. Está trabalhando para valores String (Visa-4242). Por favor, consulte este violino .
Do violino:
A mesma coisa que é feita no violino pode ser feita usando ng-repeat, que todo mundo poderia recomendar. Mas depois de ler a resposta dada por Mark Rajcok, eu só queria tentar o mesmo para um formulário com uma variedade de perfis. As coisas funcionam bem até que eu tenha o $ scope.profiles = [{}, {}]; código no controlador. Se eu remover esse código, estou recebendo erros. Mas em cenários normais, não consigo imprimir $scope.profiles = [{},{}]; como imprimo ou ecoo html no servidor. Será possível executar o acima, de maneira semelhante ao @Mark Rajcok para os valores de sequência como <input name="card[description]" ng-model="card.description" ng-init="card.description='Visa-4242'">, sem ter que repetir a parte JavaScript do servidor.
Acabei de adicionar suporte para o elemento select a Ryan Montgomery "consertar"
<select class="input-control" ng-model="regCompModel.numberOfEmployeeId" ng-initial>
<option value="1af38656-a752-4a98-a827-004a0767a52d"> More than 500</option>
<option value="233a2783-db42-4fdb-b191-0f97d2d9fd43"> Between 250 and 500</option>
<option value="2bab0669-550c-4555-ae9f-1fdafdb872e5"> Between 100 and 250</option>
<option value="d471e43b-196c-46e0-9b32-21e24e5469b4"> Between 50 and 100</option>
<option value="ccdad63f-69be-449f-8b2c-25f844dd19c1"> Between 20 and 50</option>
<option value="e00637a2-e3e8-4883-9e11-94e58af6e4b7" selected> Less then 20</option>
</select>
app.directive('ngInitial', function () {
return {
restrict: 'A',
controller: ['$scope', '$element', '$attrs', '$parse', function ($scope, $element, $attrs, $parse) {
val = $attrs.sbInitial || $attrs.value || $element.val() || $element.text()
getter = $parse($attrs.ngModel)
setter = getter.assign
setter($scope, val)
}]
}});