0
我想在AngularJs中創建一個可編輯的表。我正在使用同一日期查看同一頁面中的其他列表和詳細信息視圖。AngularJS可編輯表
我的查詢是當我單擊列表詳細信息視圖中的編輯鏈接（頁面中的選定視圖部分）部分，並修改它在表視圖部分中未更改的文本框中的值時，直到我單擊保存按鈕，但是當我單擊表格部分（頁面中的可編輯表部分）中的編輯部分並修改文本框中的值時，它也會在選定視圖部分中更改。
但是，我希望在點擊保存鏈接後更改所有的值。請罰款示例代碼並給我建議。
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Example - example-example53-production</title>
<script src="js/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>Editable Table</h1>
<table id="searchObjResults">
<tr><th ng-click="sort('name')">Name</th><th ng-click="sort('phone')">Phone</th></tr>
<tr><td><input ng-model="search.name"></td><td><input ng-model="search.phone"></td></tr>
<tr ng-repeat="friendObj in users | orderBy:orderProp:direction| filter:search:strict" ng-class-odd="'odd'">
<td click-to-edit="friendObj" type="tbl"></td>
</tr>
</table>
<h1>Selected View</h1>
<ul>
<li ng-repeat="user in users" ng-class="{active: checkActive(user)}" ng:click="select(user)">{{user.name}}</li>
</ul>
<p>selected: {{selectedUser.phone}}</p>
<p click-to-edit="selectedUser.name"></p>
<p click-to-edit="selectedUser.phone"></p>
<script>
var myApp = angular.module('myApp', []);
//myApp.by.id('setbtn')element('h1').addClass('active');
myApp.controller('MainCtrl', ['$scope','$filter', function ($scope,$filter) {
$scope.users = [{name:'John', phone:'555-1276'},
{name:'John', phone:'555-1278'},
{name:'Mary', phone:'800-BIG-MARY'},
{name:'Mike', phone:'555-4321'},
{name:'Adam', phone:'555-5678'},
{name:'Julie', phone:'555-8765'},
{name:'Juliette', phone:'555-5678'}];
//setting for order
$scope.users = $filter('orderBy')($scope.users, 'name');
//to set the defalult search
//$scope.search = {
//phone : "555-1278"
//};
//sorting
$scope.direction = false;
$scope.orderProp = "name";
$scope.sort = function(column) {
if ($scope.orderProp === column) {
$scope.direction = !$scope.direction;
} else {
$scope.orderProp = column;
$scope.direction = false;
}
};
//selected when list click
$scope.select = function(user) {
$scope.selectedUser = user;
};
//applying the selected Class
$scope.checkActive = function(user) {
return $scope.selectedUser == user;
};
//set the first item as selected
//$scope.select($scope.users[0]);
$scope.selectedUser = $scope.users[0];
}]);
myApp.directive("clickToEdit", function() {
var editorTemplate = '<td class="click-to-edit">' +
'<div ng-hide="view.editorEnabled">' +
'{{value.name}} ' +
'{{value.phone}} ' +
'<a href="#" ng-click="enableEditor()">Edit</a>' +
'</div>' +
'<div ng-show="view.editorEnabled">' +
'<input ng-model="view.editableValue.name">' +
'<input ng-model="view.editableValue.phone">' +
'<a href="#" ng-click="save()">Save</a>' +
' or ' +
'<a href="#" ng-click="disableEditor()">cancel</a>.' +
'</div>' +
'</td>';
var editorTemplate1 = '<div class="click-to-edit">' +
'<div ng-hide="view.editorEnabled">' +
'{{value}} ' +
'<a href="#" ng-click="enableEditor()">Edit</a>' +
'</div>' +
'<div ng-show="view.editorEnabled">' +
'<input ng-model="view.editableValue">' +
'<a href="#" ng-click="save()">Save</a>' +
' or ' +
'<a href="#" ng-click="disableEditor()">cancel</a>.' +
'</div>' +
'</div>';
return {
restrict: "A",
replace: true,
//template: editorTemplate,
template: function(element, attrs) {
if(attrs.type=='tbl'){
return editorTemplate;
}
else{
return editorTemplate1;
}
},
scope: {
value: "=clickToEdit",
},
link: function(scope, element, attrs) {
//alert(element);
},
controller: function($scope) {
$scope.view = {
editableValue: $scope.value,
editorEnabled: false
};
$scope.enableEditor = function() {
$scope.view.editorEnabled = true;
$scope.view.editableValue = $scope.value;
};
$scope.disableEditor = function() {
$scope.view.editorEnabled = false;
};
$scope.save = function() {
$scope.value = $scope.view.editableValue;
$scope.disableEditor();
};
}
};
});
</script>
<style>
.active{color:green}
</style>
</body>
</html>