如何推送添加新数据的数组并使用angular进行编辑?

时间:2015-06-08 16:17:54

标签: javascript angularjs

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>

1 个答案:

答案 0 :(得分:1)

您需要在范围内创建数组我的详细信息:

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

你需要在此推送对象。我创建了一个plunker,它将帮助您了解如何开始。 **它不是完整的功能。如果您需要进一步的帮助,请评论。

编辑:

Check this updated Plunker