2017-05-17 5 views
0

Wenn Sie an diesem Formular gearbeitet haben, können Sie den Namen und die Mail des Artikels ändern. Aber als ich diesen Link https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#services sah, sah ich, dass ich einige Fehler im Stil gemacht habe, aber jetzt funktioniert es nicht mehr.Angularjs bearbeiten und speichern

Ich weiß eigentlich eigentlich nicht warum. Es zeigt die {{vm.name}} und {{vm.email}} aber nicht den Namen, auch Es versteckt nicht die Eingabe und die Schaltflächen, die angezeigt werden, wenn Sie auf die Bearbeitungsschaltfläche klicken.

Dies ist der Link von Plocker https://embed.plnkr.co/yqUsSkwNBPBfOQS5jm5l/.

angular 
 
    .module("form",[]) 
 
    .controller("LocationFormCtrl", LocationFormCtrl); 
 
    
 
    function LocationFormCtrl(){ 
 
     var vm = this; 
 
     
 
     vm.name = 'henk'; 
 
     vm.mail = 'gmail'; 
 
     vm.editorEnabled = false; 
 
     
 
     var service = { 
 
     name: name, 
 
     mail : mail, 
 
     enableEditor : enableEditor, 
 
     editorEnabled: editorEnabled, 
 
     disableEditor: disableEditor, 
 
     save: save 
 
     }; 
 
     
 
     return service; 
 
     
 
     function enableEditor(){ 
 
     vm.editorEnabled = true; 
 
     vm.editName = vm.name; 
 
     vm.editMail = vm.email; 
 
     } 
 
     
 
     function save(){ 
 
     vm.name = vm.editName; 
 
     vm.email = vm.editMail; 
 
     disableEditor(); 
 
     } 
 
     
 
     function disableEditor(){ 
 
     vm.editorEnabled = false; 
 
     } 
 
     
 
    }
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
    </head> 
 
    <body ng-app="form" ng-controller="LocationFormCtrl"> 
 
    
 
    <div ng-hide="editorEnabled"> 
 
     {{ vm.name }} 
 
     {{ vm.email }} 
 
     <div ng-click="enableEditor()" style="border-radius:50%; background-color:black; height:35px; width:35px;"> 
 
      <i class="fa fa-pencil-square-o" aria-hidden="true" style="color:white;margin-left:11px; margin-top:10px;"></i> 
 
     </div> 
 
    </div> 
 
    
 
    <div ng-show="editorEnabled"> 
 
     <label>Name:</label> 
 
     <input type="text" ng-model="vm.editName" ng-show="editorEnabled"> 
 
     <br><br> 
 
     <label>Email:</label> 
 
     <input type="text" ng-model="vm.editMail" ng-show="editorEnabled"> 
 
     <div ng-click="save()" style="border-radius:50%; background-color:black; height:35px;width:35px;" > 
 
     <i class="fa fa-floppy-o" aria-hidden="true" style="color:white; margin-left:11px; margin-top:10px;"></i> 
 
     </div> 
 
     <div ng-click="disableEditor()" style="border-radius:50%; background-color:black;height:35px; width:35px;"> 
 
     <i class="fa fa-ban" aria-hidden="true" style="color:white; margin-left:11px; margin-top:10px;"></i> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

+0

Welche eckige Version verwenden Sie? Ich sehe ng-click, das nur in angularjs existiert und dein ploker verwendet angularjs. Aber das Github Repo ist über angular2? Ist es möglich, dass Sie beide Versionen unwissentlich gemischt haben? – Akkusativobjekt

+0

Soweit ich weiß, verwende ich angularjs, aber wenn es gemischt ist, dann habe ich einen Fehler gemacht. –

+0

Die kaputte URL, die mit johnpapa/eckig verbunden ist, die ungefähr eckig ist. 2. Die feste URL verweist auf den angularjs style guide, also hast du die richtige verwendet;) – Akkusativobjekt

Antwort

0

Entweder Sie verwenden this Syntax des Winkelreglers $scope, zu vermeiden oder nur $scope verwenden.

ich korrigiert Ihre plunker, Sie as Syntax in html view und binden alle Daten zu this Objekt in der Steuerung zu verwenden. Bitte unten Punkte in Plunker bemerken:

  1. ng-controller="LocationFormCtrl as vm"

  2. In html alles vm binden, wie ng-click="vm.save()".

  3. In Controller binden alles this oder sein Alias ​​.. wie vm.enableEditor = function(){/\\

und wenn Sie es mit $scope Art und Weise tun wollen, dann sehen diese $sope Plunker

+0

Vielen Dank für deine Antwort. Ich habe eine andere Frage. Wie funktioniert es mit ng-click, es wird in "ng-click =" vm.save() "geändert. Nur die Schaltfläche reagiert nicht, wenn ich auf die Schaltfläche klicke. –

+0

@ A.Berg: ng-show property 'editorEnabled' muss ebenfalls an' vm' gebunden werden, dann funktioniert es. Siehe aktualisierten [bottker] (https://plnkr.co/edit/NzEz2UWAzRVtX7EfTUNo?p=preview). Siehe Konsole, wenn Speichern geklickt wurde. – anoop

Verwandte Themen