How to push array of adding new data and edit it using angular?

Question

http://plnkr.co/edit/xUDrOS?p=preview

I want to make my code like this how can I push array in this so that i can edit my data in-line as well as add new data also. and also I want to add some labels when we add or edit fields but not want to show them when the data is displayed

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

Ajay Narain Mathur · Accepted Answer · 2015-06-09 05:13:07Z

1

You need to create array my detail in scope as:

$scope.myDetail = [
     {
       "name" : "aashima",
       "title" : "Hi! I am aashima"
     }
     ];

and the you need to push object in this. I have created a plunker it will help you understand how to start. ** it is not complete functionality. If you need further help just comment.

Edit:

Check this updated Plunker

edited Jun 9, 2015 at 5:13

answered Jun 8, 2015 at 16:42

Ajay Narain Mathur

5,5063 gold badges24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aashima Vinayak Over a year ago

thank you its almost helping me but I actually want to show the fields when the add button is clicked not before that.. how can I do that?

Ajay Narain Mathur Over a year ago

I have added an edit, a new plunker check that is that what you want?

Collectives™ on Stack Overflow

How to push array of adding new data and edit it using angular?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related