http://plnkr.co/edit/xUDrOS?p=preview
我想让我的代码像这样如何在这里推送数组,以便我可以在线编辑我的数据以及添加新数据。我还想在添加或编辑字段时添加一些标签,但在显示数据时不想显示它们
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="ClickToEditCtrl">
<div ng-hide="editorEnabled">
{{title}}<br/> {{name}}
<a href="#" ng-click="enableEditor()"><img src="pencil.jpg" style=" height: 20px;"/></a>
</div>
<div ng-show="editorEnabled">
<input ng-model="editableTitle" ng-show="editorEnabled"><br/>
<input ng-model="editableName" ng-show="editorEnabled">
<a href="#" ng-click="save()"><img src="save.png" style=" height: 20px;"/></a>
<a href="#" ng-click="disableEditor()"><img src="cancel.png" style=" height: 20px;"/></a>.
</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('ClickToEditCtrl',function($scope) {
$scope.title = "Hi! I am aashima";
$scope.name = "aashima";
$scope.editorEnabled = false;
$scope.enableEditor = function() {
$scope.editorEnabled = true;
$scope.editableTitle = $scope.title;
$scope.editableName = $scope.name;
};
$scope.disableEditor = function() {
$scope.editorEnabled = false;
};
$scope.save = function() {
$scope.title = $scope.editableTitle;
$scope.name = $scope.editableName;
$scope.disableEditor();
};
});
</script>
</body>
</html>