javascript - ngmodel

AngularJS: ¿Se ignora el atributo de valor en un cuadro de texto de entrada cuando se utiliza un modelo ng?

Question

Uso de AngularJS si configuro un valor de cuadro de texto de entrada simple a algo como "bob" a continuación. El valor no se muestra si se agrega el atributo ng-model .

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

¿Alguien sabe de una solución sencilla para omitir esta entrada a algo y mantener el ng-model ? Intenté usar un ng-bind con el valor predeterminado, pero eso tampoco parece funcionar.

Answer 1

El camino angular

La forma Angular correcta de hacer esto es escribir una aplicación de una sola página, AJAX en la plantilla de formulario, y luego rellenarla dinámicamente desde el modelo. El modelo no se rellena desde el formulario de forma predeterminada porque el modelo es la única fuente de la verdad. En su lugar, Angular irá a la inversa e intentará rellenar el formulario desde el modelo.

Sin embargo, si no tienes tiempo para empezar de cero

Si tiene una aplicación escrita, esto podría implicar algunos cambios arquitectónicos bastante fuertes. Si está intentando usar Angular para mejorar un formulario existente, en lugar de construir una aplicación de una sola página desde cero, puede extraer el valor del formulario y almacenarlo en el alcance en el momento del enlace mediante una directiva. Angular luego vinculará el valor en el alcance de nuevo al formulario y lo mantendrá sincronizado.

Usando una directiva

Puede usar una directiva relativamente simple para extraer el valor del formulario y cargarlo en el ámbito actual. Aquí he definido una directiva initFromForm.

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;
        if (attrs.type === "number") {val = parseInt(val)}
        $parse(attr).assign(scope, val);
      }
    };
  });

Puedes ver que he definido un par de alternativas para obtener un nombre de modelo. Puede usar esta directiva junto con la directiva ngModel, o vincular a algo distinto de $ scope si lo prefiere.

Úsalo así:

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

Tenga en cuenta que esto también funcionará con textareas, y seleccione menús desplegables.

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

Answer 2

El problema es que tiene que establecer el modelo ng en el elemento principal donde desea configurar el valor / valor ng. Como lo menciona Angular:

Se utiliza principalmente en la entrada [radio] y elementos de opción, de modo que cuando se selecciona el elemento, el ngModel de ese elemento (o su elemento primario seleccionado) se establece en el valor enlazado.

Ej .: Este es un código ejecutado:

<div class="col-xs-12 select-checkbox" >
<label style="width: 18em;" ng-model="vm.settingsObj.MarketPeers">
  <input name="radioClick" type="radio"  ng-click="vm.setPeerGrp(''market'');" 
         ng-value="vm.settingsObj.MarketPeers" 
         style="position:absolute;margin-left: 9px;">
  <div style="margin-left: 35px;color: #717171e8;border-bottom: 0.5px solid #e2e2e2;padding-bottom: 2%;">Hello World</div>
</label>
</div>

Nota: en este caso anterior ya tuve la respuesta JSON al modelo ng y el valor, solo estoy agregando otra propiedad al objeto JS como "MarketPeers". Por lo tanto, el modelo y el valor pueden depender de la necesidad, pero creo que este proceso ayudará a tener tanto el modelo ng como el valor, pero no tenerlos en el mismo elemento.

Answer 3

Ese es el comportamiento deseado, debe definir el modelo en el controlador, no en la vista.

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


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

Answer 4

Esta es una ligera modificación de las respuestas anteriores ...

No hay necesidad de $ parse

angular.directive(''input'', [function () {
  ''use strict'';

  var directiveDefinitionObject = {
    restrict: ''E'',
    require: ''?ngModel'',
    link: function postLink(scope, iElement, iAttrs, ngModelController) {
      if (iAttrs.value && ngModelController) {
        ngModelController.$setViewValue(iAttrs.value);
      }
    }
  };

  return directiveDefinitionObject;
}]);

Answer 5

Hola, puedes probar a continuación los métodos con inicialización del modelo.

Aquí puede inicializar ng-model de cuadro de texto de dos maneras

- Con el uso de ng-init

- Con uso de $ scope en js.

<!doctype html>
 <html >
 <head>
        <title>Angular js initalize with ng-init and scope</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body ng-app="app" >
    <h3>Initialize value with ng-init</h3>
    <!-- Initlialize model values with ng-init -->
    <div ng-init="user={fullname:''Bhaskar Bhatt'',email:''[email protected]'',address:''Ahmedabad''};">
        Name : <input type="text" ng-model="user.fullname" /><br/>
        Email : <input type="text" ng-model="user.email" /><br/>
        Address:<input type="text" ng-model="user.address" /><br/>

    </div>  
    <!-- initialize with js controller scope -->
    <h3>Initialize with js controller</h3>

    <div  ng-controller="alpha">
        Age:<input type="text" name="age" ng-model="user.age" /><br/>
        Experience : <input type="text" name="experience" ng-model="user.exp" /><br/>
        Skills : <input type="text" name="skills" ng-model="user.skills" /><br/>
    </div>  

</body> 
<script type="text/javascript">
        angular.module("app",[])
        .controller("alpha",function($scope){
            $scope.user={};
            $scope.user.age=27;
            $scope.user.exp="4+ years";
            $scope.user.skills="Php,javascript,Jquery,Ajax,Mysql";
        });

     </script>
 </html>                

Answer 6

La anulación de la directiva de entrada parece hacer el trabajo. Hice algunas modificaciones menores al código de Dan Hunsaker :

• Se agregó una comprobación para ngModel antes de intentar usar $parse().assign() Assign $parse().assign() en campos sin atributos ngModel.
• Corregido el orden param de la función assign() .

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

Answer 7

Si usa la directiva nGModel de AngularJs, recuerde que el atributo de valor del value no se enlaza en el campo ngModel . Debe iniciarlo usted mismo y la mejor manera de hacerlo es

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

Answer 8

Tuve un problema similar. No pude usar value="something" para mostrar y editar. Tuve que usar el siguiente comando dentro de mi <input> junto con el modelo declarado.

[(ngModel)]=userDataToPass.pinCode

Donde tengo la lista de datos en el objeto userDataToPass y el elemento que necesito mostrar y editar es pinCode .

Por lo mismo, me referí a este video de YouTube.

Answer 9

Vojta describió la "forma angular", pero si realmente necesita hacer que esto funcione, @urbanek publicó recientemente una solución alternativa utilizando ng-init:

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

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

Answer 10

Actualización: mi respuesta original incluía que el controlador contenga código compatible con DOM, lo que rompe las convenciones angulares en favor de HTML. @dmackerman mencionó las directivas en un comentario sobre mi respuesta, y eso me lo perdí por completo hasta ahora. Con esa entrada, aquí está la manera correcta de hacer esto sin romper las convenciones de Angular o HTML:

También hay una forma de obtener ambos: capte el valor del elemento y úselo 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 entonces:

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, puede modificar la directiva anterior para hacer más con el atributo de value antes de configurar el modelo a su valor, incluido el uso de $parse(attrs.value, scope) para tratar el atributo de value como una expresión angular (aunque probablemente usaría un atributo [personalizado] diferente para eso, personalmente, por lo que los atributos estándar de HTML se tratan constantemente como constantes).

Además, hay una pregunta similar sobre Hacer que la información de la plantilla esté disponible para el modelo ng que también puede ser de interés.