Digamos que tiene un formulario que tiene valores cargados de la base de datos. ¿Cómo se inicializa ng-model?
Ejemplo:
<input name="card[description]" ng-model="card.description" value="Visa-4242">En mi controlador, $ scope.card no está definido inicialmente. ¿Hay alguna manera además de hacer algo como esto?
$scope.card = {
description: $('myinput').val()
}
Respuestas:
Este es un error común en las nuevas aplicaciones angulares. No puede escribir sus valores en su HTML en el servidor si puede evitarlo. De hecho, si puede evitar que su servidor procese HTML por completo, mucho mejor.
Idealmente, desea enviar sus plantillas HTML angulares, luego baje sus valores a través de $ http en JSON y colóquelos en su alcance.
Entonces, si es posible, haga esto:
app.controller('MyController', function($scope, $http) {
$http.get('/getCardInfo.php', function(data) {
$scope.card = data;
});
});
<input type="text" ng-model="card.description" />
Si absolutamente DEBE representar sus valores en su HTML desde su servidor, puede colocarlos en una variable global y acceder a ellos con $ window:
En el encabezado de tu página escribirías:
<head>
<script>
window.card = { description: 'foo' };
</script>
</head>
Y luego en su controlador lo obtendría así:
app.controller('MyController', function($scope, $window) {
$scope.card = $window.card;
});
Espero que eso ayude.
Si no puede modificar su aplicación para hacer lo que @blesh sugiere (extraiga los datos JSON con $ http o $ resource y complete $ scope), puede usar ng-init en su lugar:
<input name="card[description]" ng-model="card.description" ng-init="card.description='Visa-4242'">Consulte también AngularJS: ¿Se ignora el atributo de valor en un cuadro de texto de entrada cuando se utiliza un modelo ng?
ng-inites bastante útil al establecer valores de código subyacente / devolución de datos, por ejemplo <input name="phone" data-ng-model="frm.phone" data-ng-init="frm.phone= '<%: Model.Phone %>'" data-ng-pattern="/^[0-9() \-+]+$/" type="tel" required />. ¿Un poco feo? Sí, pero hace el truco y resuelve un dolor de cabeza de integración en el proceso.
Obviamente, esta es una solución que falta, pero se agrega fácilmente para AngularJS. Simplemente escriba una directiva rápida para establecer el valor del modelo desde el campo de entrada.
<input name="card[description]" value="Visa-4242" ng-model="card.description" ng-initial>Aquí está mi versión:
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);
}
]
};
});controllertu directiva y por qué no usaste el linkmétodo? Soy novato en angularjs
val = $attrs.ngInitial || $attrs.value || $element.val()para que funcione con elementos seleccionados.
En mi humilde opinión, la mejor solución es la directiva @Kevin Stone, pero tuve que actualizarla para que funcione en todas las condiciones (fe select, textarea), y esta está funcionando con seguridad:
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);
}
}
}
}
});Puede usar una directiva personalizada (con soporte para textarea, select, radio y checkbox), consulte esta publicación de blog https://glaucocustodio.github.io/2014/10/20/init-ng-model-from-form- campos-atributos / .
Tengo un enfoque simple, porque tengo algunas validaciones y máscaras pesadas en mis formularios. Entonces, utilicé jquery para obtener mi valor nuevamente y disparar el evento "change" a validaciones:
$('#myidelement').val('123');
$('#myidelement').trigger( "change");Como otros señalaron, no es una buena práctica inicializar datos en vistas. Sin embargo, se recomienda inicializar los datos en los Controladores. (ver http://docs.angularjs.org/guide/controller )
Entonces puedes escribir
<input name="card[description]" ng-model="card.description">y
$scope.card = { description: 'Visa-4242' };
$http.get('/getCardInfo.php', function(data) {
$scope.card = data;
});De esta forma, las vistas no contienen datos y el controlador inicializa el valor mientras se cargan los valores reales.
Si le gusta el enfoque de Kevin Stone arriba https://stackoverflow.com/a/17823590/584761 considere un enfoque más fácil escribiendo directivas para etiquetas 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);
}
}
}; });Si sigue esta ruta, no tendrá que preocuparse por agregar ng-initial a cada etiqueta. Establece automáticamente el valor del modelo en el atributo de valor de la etiqueta. Si no establece el atributo de valor, el valor predeterminado será una cadena vacía.
Aquí hay un enfoque centrado en el 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>Es la misma idea básica que las respuestas más populares a esta pregunta, excepto que $ provide.value registra un servicio que contiene sus valores predeterminados.
Entonces, en el servidor, podría tener algo como:
{
description: "Visa-4242"
}Y colóquelo en su página a través de la tecnología del lado del servidor que elija. Aquí hay un resumen: https://gist.github.com/exclsr/c8c391d16319b2d31a43
Esta es una versión más genérica de las ideas mencionadas anteriormente ... Simplemente verifica si hay algún valor en el modelo, y si no, establece el valor para el 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 (ejemplo de uso):
<select class="form-control"
ng-options="v for (i, v) in compressionMethods"
ng-model="action.parameters.Method"
default-value="'LZMA2'"></select>$scopea la llamada a getter()- ¡espero que esto aclare las cosas para cualquier otra persona que intente esto!
Probé lo que sugirió @Mark Rajcok. Está funcionando para valores de cadena (Visa-4242). Por favor, consulte este violín .
Desde el violín:
Lo mismo que se hace en el violín se puede hacer usando ng-repeat, lo que todos podrían recomendar. Pero después de leer la respuesta dada por @Mark Rajcok, solo quería probar lo mismo para un formulario con una variedad de perfiles. Las cosas funcionan bien hasta que tenga el $ scope.profiles = [{}, {}]; código en el controlador. Si elimino este código, obtengo errores. Pero en escenarios normales no puedo imprimir $scope.profiles = [{},{}]; como imprimo o echo html desde el servidor. ¿Será posible ejecutar lo anterior, de manera similar a como lo hizo @Mark Rajcok para los valores de cadena como <input name="card[description]" ng-model="card.description" ng-init="card.description='Visa-4242'">, sin tener que hacer eco de la parte JavaScript del servidor.
Acabo de agregar soporte para el elemento seleccionado para "arreglar" Ryan Montgomery
<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)
}]
}});