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>
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
Soweit ich weiß, verwende ich angularjs, aber wenn es gemischt ist, dann habe ich einen Fehler gemacht. –
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