L'attribut AngularJS - Value sur une zone de texte d'entrée est ignoré lorsqu'un modèle ng est utilisé?

Vojta décrit la "voie angulaire", mais si vous avez vraiment besoin de faire ce travail, @urbanek a récemment posté une solution de contournement en utilisant ng-init:

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

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

L'annulation de la directive input semble faire l'affaire. J'ai fait quelques modifications mineures à Dan Hunsaker 's code:

• a ajouté une vérification pour ngModel avant d'essayer d'utiliser $parse().assign() sur les champs sans attributs ngModel.
• a corrigé la fonction assign() ordre 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);
      }
    }
  };
});

L'angle de façon

la façon angulaire correcte de faire ceci est d'écrire une application d'une seule page, AJAX dans le modèle de formulaire, puis le peupler dynamiquement à partir du modèle. Le modèle n'est pas peuplé à partir de la forme par défaut parce que le modèle est la seule source de vérité. Au lieu de cela Angular va aller dans l'autre sens et essayer de peupler la forme du modèle.

Si toutefois, vous n'avez pas le temps de recommencer à partir de zéro

si vous avoir une application écrite, cela pourrait impliquer des changements architecturaux assez importants. Si vous essayez D'utiliser Angular pour améliorer un formulaire existant, plutôt que de construire une application d'une page entière à partir de zéro, vous pouvez tirer la valeur du formulaire et le stocker dans le cadre au moment du lien En utilisant une directive. Angular va alors lier la valeur de la portée à la forme et la garder synchronisée.

à l'Aide d'une directive

Vous pouvez utiliser un relativement simple directive pour extraire la valeur de la forme et la charger dans le champ d'application actuel. Ici, j'ai défini une directive 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);
      }
    };
  });

vous pouvez voir que j'ai défini quelques retombées pour obtenir un nom de modèle. Vous pouvez utiliser cette directive en conjonction avec la directive ngModel, ou vous lier à quelque chose d'autre que $scope si vous préférez.

utilisez - le comme ceci:

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

notez que cela fonctionnera aussi avec les textareas, et sélectionnez déroulante.

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

mise à jour: ma réponse originale consistait à avoir le contrôleur contenant du code DOM-aware, qui casse les conventions angulaires en faveur de HTML. @dmackerman a mentionné des directives dans un commentaire sur ma réponse, et je l'ai complètement manqué jusqu'à maintenant. Avec cette entrée, voici le droit façon de le faire sans briser L'angle ou conventions HTML:

Il ya aussi un façon d'obtenir les deux - saisissez la valeur de l'élément et utilisez-le pour mettre à jour le modèle dans une directive:

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

et ensuite:

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

vous pouvez bien sûr modifier la directive ci-dessus pour en faire plus avec l'attribut value avant de définir le modèle à sa valeur, y compris en utilisant $parse(attrs.value, scope) pour traiter l'attribut value comme une expression angulaire (bien que j'utiliserais probablement un attribut [personnalisé] différent pour cela, personnellement, de sorte que le les attributs HTML standards sont systématiquement traités comme des constantes).

aussi, il y a une question similaire sur À la mise à disposition de données templated dans le ng-modèle qui peut également être d'intérêt.

si vous utilisez la directive AngularJs ngModel, rappelez-vous que la valeur de value attribut ne se lie pas au champ de ngModel .Vous devez init par vous-même et la meilleure façon de le faire,est

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

il s'agit d'une légère modification par rapport aux réponses précédentes...

il n'y a pas besoin 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;
}]);

Salut, vous pouvez essayer les méthodes ci-dessous avec initialiser le modèle.

ici, vous pouvez initialiser ng-modèle de la boîte de texte à double sens

- avec utilisation de ng-init

- Avec l'utilisation de $portée 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:'bhatt.bhaskar88@gmail.com',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>                

Le problème est que vous devez définir la ng-modèle à l'élément parent de l'endroit où vous souhaitez définir le ng-valeur/valeur . Comme indiqué par Angular:

il est principalement utilisé sur les éléments d'entrée[radio] et d'option, de sorte que lorsque l'élément est sélectionné, le ngModel de cet élément (ou son élément parent sélectionné) est défini à la valeur liée.

Eg: C'est un code exécuté:

<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>

Remarque: Dans ce cas ci-dessus, j'ai déjà eu la réponse JSON au modèle ng-et la valeur, je suis juste ajouter une autre propriété à L'objet JS en tant que "MarketPeers". Donc, le modèle et la valeur peuvent dépendre selon le besoin, mais je pense que ce processus aidera, d'avoir à la fois le modèle ng et la valeur mais ne pas les avoir sur le même élément.

j'ai eu un problème similaire. Je n'ai pas pu utiliser value="something" pour afficher et éditer. J'ai dû utiliser la commande ci-dessous à l'intérieur de mon <input> avec un modèle déclaré.

[(ngModel)]=userDataToPass.pinCode

où j'ai la liste de données dans l'objet userDataToPass et l'élément que je dois afficher et modifier est pinCode .

pour le même, j'ai fait référence à cette vidéo YouTube