220 votos

¿Angularjs - atributo de valor en una caja de texto de entrada se ignora cuando se utiliza un modelo de ng?

Usando AngularJS si pongo un valor de caja de texto de entrada simple a algo como "bob" más abajo. El valor no aparece si el ng-model se agrega atributo.

    <input type="text"
           id="rootFolder"
           ng-model="rootFolders"
           disabled="disabled"
           value="Bob"
           size="40"/>

¿Alguien sabe de un trabajo simple que por defecto esta entrada a algo y mantener el ng-model ? Intenté usar un ng-bind con el valor por defecto valor pero que parece no funcionar bien.

224voto

Vojta Puntos 12058

Eso es un comportamiento deseado, debe definir el modelo en el controlador, no en el punto de vista.

<div ng-controller="Main">
  <input type="text" ng-model="rootFolders">
</div>


function Main($scope) {
  $scope.rootFolders = 'bob';
}

189voto

Mark Rajcok Puntos 85912

Vojta describe la "forma Angular", pero si tienes que hacer que esto funcione, @urbanek ha publicado recientemente una solución utilizando ng-init:

<input type="text" ng-model="rootFolders" ng-init="rootFolders='Bob'" value="Bob">

https://groups.google.com/d/MSG/angular/Hn3eztNHFXw/wk3HyOl9fhcJ

68voto

Ivan Breet Puntos 281

Reemplazar la Directiva entrada parecen hacer el trabajo. Hice algunas alteraciones menores Dan Hunsakerde código:

  • Añadido un cheque por ngModel antes de intentar utilizar $parse().assign() en campos sin los atributos de un ngModel.
  • Corregida la orden assign() función param.
app.directive('input', function ($parse) {
  return {
    restrict: 'E',
    require: '?ngModel',
    link: function (scope, element, attrs) {
      if (attrs.ngModel && attrs.value) {
        $parse(attrs.ngModel).assign(scope, attrs.value);
      }
    }
  };
});

21voto

superluminary Puntos 5496

La forma Angular

El Angular correcta manera de hacer esto es escribir una sola página de la aplicación, AJAX en la plantilla de formulario, a continuación, rellenar dinámicamente a partir del modelo. El modelo no está poblada desde el formulario por defecto porque el modelo es la única fuente de la verdad. En lugar Angular que va a ir por otro camino y tratar de rellenar el formulario de la modelo.

Sin embargo, si usted no tiene tiempo para empezar de cero

Si usted tiene una aplicación escrita, esto puede implicar algunos bastante fuertes cambios en la arquitectura. Si usted está tratando de utilizar Angular para mejorar un formulario existente, en vez de construir toda una sola página de la aplicación desde cero, se puede extraer el valor del formulario y almacenar en el ámbito de aplicación en el momento de enlazar mediante una directiva. Angular luego enlazar el valor en el ámbito de vuelta a la forma y mantenerlo sincronizado.

El uso de una directiva

Puede utilizar un método relativamente simple de la directiva para tirar de el valor de la forma y de la carga en el ámbito actual. Aquí he definido un initFromForm directiva.

var myApp = angular.module("myApp", ['initFromForm']);

angular.module('initFromForm', [])
  .directive("initFromForm", function ($parse) {
    return {
      link: function (scope, element, attrs) {
        var attr = attrs.initFromForm || attrs.ngModel || element.attrs('name'),
        val = attrs.value;
        $parse(attr).assign(scope, val)
      }
    };
  });

Puede ver que lo he definido un par de alternativas para obtener un nombre de modelo. Usted puede usar esta directiva en conjunto con la ngModel directiva, o enlazar a algo distinto de $scope, si lo prefiere.

Utilizar como esta:

<input name="test" ng-model="toaster.test" value="hello" init-from-form />
{{toaster.test}}

Nota: esto también funciona con los textareas, y seleccione las listas desplegables.

<textarea name="test" ng-model="toaster.test" init-from-form>hello</textarea>
{{toaster.test}}

7voto

Dan Hunsaker Puntos 63

Actualización: Mi respuesta original involucraba tener el controlador de contener DOM-conocimiento del código, que rompe Angular convenios en favor de HTML. @dmackerman mencionadas directivas en un comentario en mi respuesta, y estoy totalmente perdido que hasta ahora. Con esa entrada, aquí está la derecha manera de hacer esto sin romper Angular o HTML convenios:


También hay una manera para conseguir que los dos toma el valor del elemento y utilizarlo para actualizar el modelo en una directiva:

<div ng-controller="Main">
    <input type="text" id="rootFolder" ng-model="rootFolders" disabled="disabled" value="Bob" size="40" />
</div>

y luego:

app.directive('input', ['$parse', function ($parse) {
    return {
        restrict: 'E',
        require: '?ngModel',
        link: function (scope, element, attrs) {
            if(attrs.value) {
                $parse(attrs.ngModel).assign(scope, attrs.value);
            }
        }
    };
}]);

Por supuesto, usted puede modificar la directiva de arriba para ver más con los value atributo antes de establecer el modelo de su valor, incluyendo el uso de $parse(attrs.value, scope) para el tratamiento de la value atributo como un Angular de expresión (aunque me gustaría probable que el uso de diferentes [personalizado] atributo para que, en lo personal, por lo que el estándar atributos HTML son siempre tratadas como constantes).

También, hay una pregunta similar sobre, al Hacer que los datos de plantilla en disposición de ng-modelo que también puede ser de interés.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X