AngularJS – L’attributo valore su una casella di testo di input viene ignorato quando viene utilizzato un modello ng?

Usando AngularJS se imposto un valore di casella di testo di input semplice su qualcosa come “bob” di seguito. Il valore non viene visualizzato se viene aggiunto l’attributo ng-model .

   

Qualcuno sa di un semplice lavoro in giro per default questo input per qualcosa e mantenere il ng-model ? Ho provato ad usare un ng-bind con il valore predefinito ma sembra non funzionare neanche.

Questo è il comportamento desiderato, dovresti definire il modello nel controller, non nella vista.

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

Vojta ha descritto il “modo angular”, ma se hai davvero bisogno di farlo funzionare, @urbanek ha recentemente pubblicato una soluzione alternativa usando ng-init:

  

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

Sovrascrivere la direttiva di input sembra fare il lavoro. Ho apportato alcune modifiche minori al codice di Dan Hunsaker :

  • Aggiunto un controllo per ngModel prima di provare a usare $parse().assign() Assign $parse().assign() su campi senza attributi ngModel.
  • Corretto l’ordine param della funzione 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); } } }; }); 

La via angular

Il modo angular corretto per eseguire questa operazione è scrivere un’app a singola pagina, AJAX nel modello di modulo, quindi popolarla dynamicmente dal modello. Il modello non viene popolato dal modulo per impostazione predefinita perché il modello è l’unica fonte di verità. Invece Angular andrà nella direzione opposta e cercherà di compilare il modulo dal modello.

Se tuttavia, non hai il tempo di ricominciare da capo

Se hai un’app scritta, questo potrebbe comportare dei cambiamenti architettonici abbastanza pesanti. Se stai cercando di utilizzare Angular per migliorare un modulo esistente, invece di build un’intera app singola pagina da zero, puoi estrarre il valore dal modulo e archiviarlo nell’ambito nell’ambito del tempo di collegamento utilizzando una direttiva. Angular legherà quindi il valore dello scope al modulo e lo manterrà sincronizzato.

Utilizzando una direttiva

È ansible utilizzare una direttiva relativamente semplice per estrarre il valore dal modulo e caricarlo nell’ambito corrente. Qui ho definito una direttiva 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); } }; }); 

Puoi vedere che ho definito un paio di fallback per ottenere il nome di un modello. È ansible utilizzare questa direttiva insieme alla direttiva ngModel o associare a qualcosa di diverso da $ scope se si preferisce.

Usalo in questo modo:

  {{toaster.test}} 

Nota questo funzionerà anche con le textareas e seleziona i menu a discesa.

  {{toaster.test}} 

Aggiornamento: la mia risposta originale riguardava il fatto che il controller contenesse codice compatibile con DOM, che rompe le convenzioni angolari in favore dell’HTML. @dmackerman ha menzionato le direttive in un commento sulla mia risposta, e l’ho completamente perso fino ad ora. Con questo input, ecco il modo giusto per farlo senza rompere le convenzioni angolari o HTML:


C’è anche un modo per ottenere entrambi: prendi il valore dell’elemento e usalo per aggiornare il modello in una direttiva:

 

e poi:

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

Ovviamente è ansible modificare la direttiva precedente per fare di più con l’attributo value prima di impostare il modello sul suo valore, incluso l’uso di $parse(attrs.value, scope) per trattare l’attributo value come un’espressione Angolare (anche se probabilmente utilizzerei un attributo [personalizzato] diverso per quello, personalmente, quindi gli attributi HTML standard sono coerentemente trattati come costanti).

Inoltre, vi è una domanda simile a rendere disponibili i modelli disponibili per ng-model che potrebbero anche essere di interesse.

Se si utilizza la direttiva ngModel di AngularJs, ricordare che il valore dell’attributo value non si associa al campo ngModel . È necessario inizializzarlo da soli e il modo migliore per farlo è

  

Questa è una leggera modifica alle risposte precedenti …

Non c’è bisogno di $ 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; }]); 

Ciao puoi provare i metodi qui sotto con l’inizializzazione del modello.

Qui puoi inizializzare il modello ng di textbox in due direzioni

– Con l’uso di ng-init

– Con l’uso di $ scope in js

    Angular js initalize with ng-init and scope    

Initialize value with ng-init

Name :
Email :
Address:

Initialize with js controller

Age:
Experience :
Skills :

Il problema è che devi impostare il modello ng sull’elemento genitore dove vuoi impostare il valore / valore ng. Come menzionato da Angular:

Viene utilizzato principalmente su input [radio] e elementi di opzione, in modo che quando l’elemento è selezionato, il ngModel di quell’elemento (o il suo elemento padre selezionato) sia impostato sul valore associato.

Ad esempio: questo è un codice eseguito:

 

Nota: in questo caso precedente ho avuto la risposta JSON al modello ng e il valore, sto solo aggiungendo un’altra proprietà all’object JS come “MarketPeers”. Quindi il modello e il valore possono dipendere in base alle necessità, ma penso che questo processo aiuterà, per avere sia il modello che il valore ma non averli sullo stesso elemento.