2015-06-08 56 views
2
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/> 
 
\t  <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>. 
 
\t 
 
    </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; 
 
\t $scope.editableName = $scope.name; 
 
    }; 
 
    
 
    $scope.disableEditor = function() { 
 
    $scope.editorEnabled = false; 
 
    }; 
 
    
 
    $scope.save = function() { 
 
    $scope.title = $scope.editableTitle; 
 
\t $scope.name = $scope.editableName; 
 
    $scope.disableEditor(); 
 
\t 
 
    }; 
 
}); 
 

 
</script> 
 
</body> 
 
</html>

回答

1

您需要在範圍上創建陣列我詳細的數據並不想向他們展示添加一些標籤:

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

和你需要在這個對象中。我創建了一個plunker它將幫助您瞭解如何開始。 **它不是完整的功能。如果您需要更多幫助,請點評。

編輯:

Check this updatedPlunker

+0

謝謝它幾乎幫助我,但其實我是想表明,當添加按鈕被點擊之前沒有的..我該怎麼做,該領域? –

+0

我已經添加了一個編輯,一個新的plunker檢查,那就是你想要的嗎? –

+0

是的,謝謝你的幫助:) –