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

Utilisation d'AngularJS si j'ai défini une valeur de zone de texte de saisie simple à quelque chose comme "bob" ci-dessous. La valeur ne s'affiche pas si l' ng-modelattribut est ajouté.

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

Quelqu'un sait qu'il existe un moyen simple de contourner cette entrée par défaut et de conserver le ng-model? J'ai essayé d'utiliser un ng-bindavec la valeur par défaut mais cela ne semble pas fonctionner non plus.

C'est le comportement souhaité, vous devez définir le modèle dans le contrôleur, pas dans la vue.

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


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

Vojta a décrit la "voie angulaire", mais si vous avez vraiment besoin de faire ce travail, @urbanek a récemment publié 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

Remplacer la directive d'entrée semble faire l'affaire. J'ai apporté quelques modifications mineures au code de Dan Hunsaker :

• Ajout d'une vérification de ngModel avant d'essayer d'utiliser $parse().assign()sur des champs sans attributs ngModel.
• Correction de l' assign()ordre des paramètres de fonction.

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

La manière angulaire correcte de le faire est d'écrire une application d'une seule page, AJAX dans le modèle de formulaire, puis de la remplir dynamiquement à partir du modèle. Le modèle n'est pas renseigné par défaut à partir du formulaire car le modèle est la seule source de vérité. Au lieu de cela, Angular ira dans l'autre sens et essaiera de remplir le formulaire à partir du modèle.

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

Si vous avez une application écrite, cela peut impliquer des changements architecturaux assez lourds. Si vous essayez d'utiliser Angular pour améliorer un formulaire existant, plutôt que de créer une application entière d'une seule page à partir de zéro, vous pouvez extraire la valeur du formulaire et la stocker dans la portée au moment du lien à l'aide d'une directive. Angular liera ensuite la valeur de l'étendue au formulaire et la gardera synchronisée.

Utilisation d'une directive

Vous pouvez utiliser une directive relativement simple pour extraire la valeur du formulaire et la charger dans la portée actuelle. 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 solutions de rechange pour obtenir un nom de modèle. Vous pouvez utiliser cette directive en conjonction avec la directive ngModel, ou vous lier à autre chose 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 également avec les zones de texte et sélectionnez des listes déroulantes.

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

Mise à jour: Ma réponse initiale impliquait que le contrôleur contienne du code compatible DOM, ce qui rompt les conventions angulaires en faveur du HTML. @dmackerman a mentionné des directives dans un commentaire sur ma réponse, et cela m'a complètement manqué jusqu'à présent. Avec cette entrée, voici la bonne façon de le faire sans enfreindre les conventions angulaires ou HTML:

Il y a aussi un moyen d'obtenir les deux - saisir la valeur de l'élément et l'utiliser 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>

puis:

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' valueattribut avant de définir le modèle sur sa valeur, notamment en utilisant $parse(attrs.value, scope)pour traiter l' valueattribut comme une expression angulaire (bien que j'utiliserais probablement un attribut [personnalisé] différent pour cela, personnellement, les attributs HTML standard sont donc systématiquement traités comme des constantes).

En outre, une question similaire est posée sur Rendre les modèles de données disponibles pour le modèle ng qui peut également être intéressant.

Si vous utilisez la directive AngularJs ngModel, n'oubliez pas que la valeur de l' valueattribut ne se lie pas au champ ngModel. Vous devez l' initier par vous-même et la meilleure façon de le faire est de

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

Ceci est une légère modification des 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 le modèle ng de la zone de texte dans les deux sens

- Avec utilisation de ng-init

- Avec utilisation de $ scope dans 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 le modèle ng sur l'élément parent à l'endroit où vous souhaitez définir la valeur / valeur ng. Comme mentionné 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 sur la valeur liée.

Par exemple: Ceci 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, j'ajoute simplement une autre propriété à l'objet JS en tant que "MarketPeers". Ainsi, le modèle et la valeur peuvent dépendre selon les besoins, mais je pense que ce processus aidera, à avoir à la fois ng-modèle et 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 modifier. J'ai dû utiliser la commande ci-dessous à l'intérieur de mon <input>long avec le modèle ng en cours de déclaration.

[(ngModel)]=userDataToPass.pinCode

Où j'ai la liste des données dans l'objet userDataToPasset l'élément que je dois afficher et modifier estpinCode .

Pour la même chose, je me suis référé à cette vidéo YouTube