0
このフォームで作業している場合、アイテムの名前とメールが変更される可能性があります。 しかし、私がこのリンクhttps://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#servicesを見たとき、私はこのスタイルでいくつかの間違いをしていましたが、今はもう動作しません。Angularjs編集と保存
私は実際になぜ実際にはわかりません。 {{vm.name}}と{{vm.email}}が表示されますが、名前は表示されません。入力ボタンと編集ボタンをクリックしたときに表示されるボタンも非表示になりません。
これはplunker 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>
どの角度バージョンを使用していますか？私はanggsにのみ存在するng-clickを参照し、あなたのplunkerはangularjsも使用します。しかし、githubレポはangular2についてですか？あなたは無意識のうちに両方のバージョンを混在させる可能性はありますか？ – Akkusativobjekt
私が知っている限り、私はangularjsを使用していますが、それがミックスされていると私は間違いを犯しました。 –
johnpapa/angularにリンクされている破損したURLは約2角であります。固定URLはanglejsスタイルのガイドにリンクしていますので、正しいURLを使用しました; – Akkusativobjekt