it-swarm.com.de

AngularJS - Value-Attribut in einem Eingabetextfeld wird ignoriert, wenn ein NG-Modell verwendet wird

Verwenden von AngularJS, wenn ich einen einfachen Wert für das Eingabetextfeld auf "bob" gesetzt habe. Der Wert wird nicht angezeigt, wenn das ng-model-Attribut hinzugefügt wird.

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

Kennt jemand eine einfache Umgehung, um diese Eingabe auf etwas zu setzen und den ng-model zu behalten? Ich habe versucht, einen ng-bind mit dem Standardwert zu verwenden, aber das scheint auch nicht zu funktionieren.

211
HelloWorld

Das ist erwünschtes Verhalten. Sie sollten das Modell im Controller definieren, nicht in der Ansicht.

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


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

Vojta beschrieb den "winkeligen Weg", aber wenn Sie dies wirklich tun müssen, hat @urbanek kürzlich eine Problemumgehung mit ng-init veröffentlicht:

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

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

182
Mark Rajcok

Das Überschreiben der Eingabe-Direktive scheint den Job zu erledigen. Ich habe einige kleine Änderungen am Dan Hunsaker Code vorgenommen:

  • Es wurde eine Überprüfung für ngModel hinzugefügt, bevor $parse().assign() für Felder ohne ngModel-Attribute verwendet wurde.
  • Korrigierte die assign() Funktionsparameterordnung.
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);
      }
    }
  };
});
66
Ivan Breet

Der winkelige Weg

Der richtige Weg, um dies zu tun, besteht darin, eine einzelne Seiten-App AJAX in die Formularvorlage zu schreiben und sie dann dynamisch aus dem Modell auszufüllen. Das Modell wird standardmäßig nicht aus dem Formular ausgefüllt, da das Modell die einzige Wahrheit ist. Stattdessen geht Angular den anderen Weg und versucht, das Formular aus dem Modell auszufüllen.

Wenn Sie jedoch keine Zeit haben, von vorne zu beginnen

Wenn Sie eine App geschrieben haben, kann dies einige recht starke architektonische Änderungen mit sich bringen. Wenn Sie versuchen, Angular zu verwenden, um ein vorhandenes Formular zu verbessern, anstatt eine komplette App für eine einzelne Seite von Grund auf zu erstellen, können Sie den Wert aus dem Formular ziehen und ihn zum Zeitpunkt der Verknüpfung mithilfe einer Direktive speichern. Angular bindet den Wert im Gültigkeitsbereich dann wieder an das Formular und hält ihn synchron.

Verwendung einer Direktive

Sie können eine relativ einfache Anweisung verwenden, um den Wert aus dem Formular zu ziehen und in den aktuellen Bereich zu laden. Hier habe ich eine initFromForm-Direktive definiert.

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

Sie können sehen, dass ich ein paar Fallbacks definiert habe, um einen Modellnamen zu erhalten. Sie können diese Direktive zusammen mit der Direktive ngModel verwenden oder an ein anderes Element als $ scope binden, wenn Sie dies vorziehen.

Verwenden Sie es so:

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

Beachten Sie, dass dies auch für Textbereiche geeignet ist und Dropdown-Listen auswählen.

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

Wenn Sie die AngularJs-ngModel-Direktive verwenden, denken Sie daran, dass der Wert von value attribute nicht an das ngModel-Feld bindet

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

Update: Meine ursprüngliche Antwort bestand darin, dass der Controller DOM-fähigen Code enthielt, der die Angular-Konventionen zugunsten von HTML verletzt. @dmackerman erwähnte Richtlinien in einem Kommentar zu meiner Antwort, und das habe ich bis jetzt völlig vermisst. Mit dieser Eingabe ist dies der rechte-Weg, um dies zu tun, ohne die Angular-Konventionen oder zu brechen:


Es gibt auch eine Möglichkeit, beides zu erhalten - greifen Sie den Wert des Elements und verwenden Sie diesen, um das Modell in einer Direktive zu aktualisieren:

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

und dann:

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

Sie können die obige Direktive natürlich ändern, um mehr mit dem value-Attribut zu tun, bevor Sie das Modell auf seinen Wert setzen, einschließlich der Verwendung von $parse(attrs.value, scope), um das value-Attribut als Angular-Ausdruck zu behandeln (obwohl ich wahrscheinlich ein anderes [custom] -Attribut dafür verwenden würde persönlich werden die Standard-HTML-Attribute durchgängig als Konstanten behandelt.

Es gibt auch eine ähnliche Frage über Das Bereitstellen von Daten für das ng-model die ebenfalls von Interesse sein könnten.

7
Dan Hunsaker

Dies ist eine geringfügige Modifikation der früheren Antworten ...

$ -Parameter ist nicht erforderlich

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;
}]);
5
dale.lotts

Das Problem ist, dass Sie das ng-model auf das übergeordnete Element setzen müssen, an dem Sie den ng-value/value festlegen möchten. __ Wie von Angular erwähnt:

Es wird hauptsächlich für Eingabe- [Radio] - und Optionselemente verwendet, sodass bei Auswahl des Elements das ngModel dieses Elements (oder seines übergeordneten Select-Elements) auf den gebundenen Wert gesetzt wird.

Beispiel: Dies ist ein ausgeführter Code:

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

Hinweis: In diesem Fall hatte ich bereits die JSON-Antwort auf das ng-model und den Wert. Ich füge dem JS-Objekt lediglich eine weitere Eigenschaft als "MarketPeers" hinzu. Das Modell und der Wert hängen also von den Bedürfnissen ab, aber ich denke, dieser Prozess wird helfen, sowohl das Ng-Modell als auch den Wert zu haben, aber nicht auf dasselbe Element.

0
sg28

Hallo, Sie können die folgenden Methoden mit der Initialisierung des Modells ausprobieren.

Hier können Sie das ng-Modell der Textbox auf zwei Arten initialisieren

- bei Verwendung von ng-init

- Mit $ scope in 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>                
0
Bhaskar Bhatt

Ich hatte ein ähnliches Problem. Ich konnte value="something" nicht zum Anzeigen und Bearbeiten verwenden Ich musste den folgenden Befehl in meinem <input>along verwenden, während das ng-Modell deklariert wurde.

[(ngModel)]=userDataToPass.pinCode

Wo ich die Liste der Daten im Objekt userDataToPass habe und das Element, das ich anzeigen und bearbeiten muss, ist pinCode.

Für das gleiche habe ich dieses YouTube-Video

0
tkrloltkr