Angular js init ng-model a partir de valores predeterminados

Supongamos que tiene un formulario que tiene valores cargados desde la base de datos. ¿Cómo inicializas ng-model?

Ejemplo:

 

En mi controlador, $ scope.card no está definido inicialmente. ¿Hay alguna manera además de hacer algo como esto?

 $scope.card = { description: $('myinput').val() } 

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 puedes evitar que tu servidor rinda HTML por completo, mucho mejor.

Idealmente, desea enviar sus plantillas de HTML angular, luego despliegue sus valores a través de $ http en JSON y colóquelos en su scope.

Entonces, si es posible, haz esto:

 app.controller('MyController', function($scope, $http) { $http.get('/getCardInfo.php', function(data) { $scope.card = data; }); });  

Si usted DEBE presentar sus valores en su HTML desde su servidor, puede ponerlos en una variable global y acceder a ellos con $ window:

En el encabezado de tu página escribirías:

    

Y luego en tu controlador lo obtendrías así:

 app.controller('MyController', function($scope, $window) { $scope.card = $window.card; }); 

Espero que eso ayude.

Si no puede volver a trabajar su aplicación para hacer lo que sugiere @blesh (bajar datos JSON con $ http o $ resource y llenar $ scope), puede usar ng-init en su lugar:

  

Consulte también AngularJS – ¿El atributo de valor en un cuadro de texto de entrada se ignora cuando se usa un modelo ng?

Esta es una solución que obviamente 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.

  

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

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

Puedes usar una directiva personalizada (con soporte para textarea, seleccionar, radio y checkbox), echa un vistazo a esta publicación del blog https://glaucocustodio.github.io/2014/10/20/init-ng-model-from-form- fields-attributes / .

También puede usar dentro de su código HTML: ng-init="card.description = 12345"

Angular no lo recomienda, y como se mencionó anteriormente, debe usar exclusivamente su controlador.

Pero funciona 🙂

Tengo un enfoque simple, porque tengo algunas validaciones pesadas y máscaras en mis formularios. Entonces, utilicé jquery para obtener mi valor nuevamente y activar el evento “cambiar” a validaciones:

 $('#myidelement').val('123'); $('#myidelement').trigger( "change"); 

Como otros señalaron, no es una buena práctica inicializar los datos en las vistas. Sin embargo, se recomienda inicializar datos en los Controladores. (ver http://docs.angularjs.org/guide/controller )

Entonces puedes escribir

  

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 que se encuentra arriba de https://stackoverflow.com/a/17823590/584761, considere un enfoque más fácil escribiendo directivas para tags específicas como ‘entrada’.

 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 realiza 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, se convertirá en una cadena vacía por defecto.

Aquí hay un enfoque centrado en el servidor:

     

Es la misma idea básica que las respuestas más populares sobre esta pregunta, excepto $ provide.value que registra un servicio que contiene sus valores predeterminados.

Entonces, en el servidor, podrías 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 una esencia: 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):

  

Intenté lo que sugirió @Mark Rajcok. Está trabajando para valores de cadena (Visa-4242). Por favor refiérase a este violín .

Del violín:

Lo mismo que se hace en el violín se puede hacer usando ng-repeat , que todo el mundo podría 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 tengo $ 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 forma similar a @Mark Rajcok para los valores de cadena como , sin tener que repetir la parte de JavaScript del servidor.

Acabo de agregar soporte para el elemento seleccionado a Ryan Montgomery “arreglar”

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

});

Si tiene el valor init en la URL como mypage/id , entonces en el controlador de la JS angular puede usar location.pathname para encontrar la identificación y asignarla al modelo que desee.