CODEWITHSUNDEEP
javascriptangularjs
Aashima Vinayak
Aashima Vinayak

Reputation: 107

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

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>

Upvotes: 2

Views: 531

Answers (1)

Ajay Narain Mathur
Ajay Narain Mathur

Reputation: 5466

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

Upvotes: 1

Related Questions