angular
.module("form",["factories"])
.controller("LocationFormCtrl", LocationFormCtrl);
function LocationFormCtrl(userFactory, carFactory, petFactory){
var vm = this;
vm.user = userFactory.getUser();
vm.editorEnabled = false;
vm.enableEditor = function(){
vm.editorEnabled = true;
vm.editName = vm.user.name;
vm.editName = vm.users.name;
vm.editMail = vm.user.mail;
vm.editMail = vm.users.mail;
};
vm.save = function(){
vm.user.name = vm.editName;
vm.users.name = vm.editName;
vm.user.mail = vm.editMail;
vm.users.mail = vm.editMail;
vm.disableEditor();
};
vm.disableEditor = function(){
vm.editorEnabled = false;
};
vm.users = userFactory.getUsers();
}
var factories = angular.module("factories", []);
factories.factory('userFactory', function(){
var factory = {
getUser: getUser,
getUsers: getUsers
}
return factory;
function getUser(){
var user = {
name: "henk2",
mail: 'aaa@gmail.com'
}
return user;
}
function getUsers(){
var users = [
{
name: "Bert",
mail: 'bert@gmail.com'
},
{
name: "Giel",
mail: 'giel@gmail.com'
},
{
name: "Willem",
mail: 'willem@gmail.com'
}
];
return users;
selected: {}
}
});
factories.factory('carFactory', function(){
var factory = {
getCar : getCar
}
return factory;
function getCar(){
var car = {
color: "black",
maxSpeed: 200,
name: "Audi r8 spyder"
}
return car;
}
});
factories.factory("petFactory", function(){
var factory = {
getPet : getPet
}
return factory;
function getPet(){
var pet = {
name: "vlekje",
soort: "cat",
age: 6
}
return pet;
}
});<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="factories.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="form" ng-controller="LocationFormCtrl as vm">
<
<table border="2">
<tbody ng-submit="doneEditing">
<tr ng-repeat="x in vm.users">
<td>
<input value="{{ x.name }}" ng-dblclick="editItem(item)" style="border: none;">
</td>
<td>
<input value="{{ x.mail }}" ng-dblclick="editItem(item)" style= "border:none;">
</td>
</tr>
</tbody>
</table>
<table border="2">
<tr ng-repeat="person in vm.users">
<td>
<div ng-hide="vm.editorEnabled">{{ person.name }}</div>
<div ng-show="vm.editorEnabled">
<input type="text" value="{{ person.name }}" />
</div>
</td>
<td>
<div ng-hide="vm.editorEnabled">{{ person.mail }}</div>
<div ng-show="vm.editorEnabled">
<input type="text" value="{{ person.mail }}" />
</div>
</td>
<td>
<div ng-hide="vm.editorEnabled">
<div ng-click="vm.enableEditor()">Edit</div>
</div>
<div ng-show="vm.editorEnabled">
<div ng-click="vm.save()" style="border-radius:50%; background-color:black; height:35px;width:35px;" >
<i class="fa fa-floppy-o" aria-hidden="true" style="color:white; margin-left:11px; margin-top:10px;"></i>
</div>
<div ng-click="vm.disableEditor()" style="border-radius:50%; background-color:black;height:35px; width:35px;">
<i class="fa fa-ban" aria-hidden="true" style="color:white; margin-left:11px; margin-top:10px;"></i>
</div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
答案 0 :(得分：0)
您必须在ng-repaeat中使用$ index才能知道必须编辑哪一行以及必须保存哪一行。
将您的HTML更改为
<table border="2">
<tr ng-repeat="person in vm.users">
<td>
<div ng-hide="vm.editorEnabled[$index]">{{ person.name }}</div>
<div ng-show="vm.editorEnabled[$index]">
<input type="text" value="{{ person.name }}" ng-model="person.name" />
</div>
</td>
<td>
<div ng-hide="vm.editorEnabled[$index]">{{ person.mail }}</div>
<div ng-show="vm.editorEnabled[$index]">
<input type="text" value="{{ person.mail }}" ng-model="person.mail" />
</div>
</td>
<td>
<div ng-hide="vm.editorEnabled[$index]">
<div ng-click="vm.enableEditor($index)">Edit</div>
</div>
<div ng-show="vm.editorEnabled[$index]">
<div ng-click="vm.save($index,person.name,person.mail)" style="background-color:black; height:25px; width:45px;color: #fff;">
save
</div>
<div ng-click="vm.disableEditor($index)" style="background-color:black;height:25px; width:45px;color: #fff;">
cancel
</div>
</div>
</td>
</tr>
</table>
和你的控制器
vm.editorEnabled = [];
vm.enableEditor = function(index) {
vm.editorEnabled[index] = true;
vm.editName = vm.user.name;
vm.editName = vm.users.name;
vm.editMail = vm.user.mail;
vm.editMail = vm.users.mail;
};
vm.save = function(index,editNameValue,editEmailValue) {
vm.users[index].name = editNameValue;
vm.users[index].mail = editEmailValue;
vm.disableEditor(index);
};
vm.disableEditor = function(index) {
vm.editorEnabled[index] = false;
};
工作fiddle
答案 1 :(得分：0)
尝试以下示例。根据需要修改代码。
angular
.module("form",["factories"])
.controller("LocationFormCtrl", LocationFormCtrl);
function LocationFormCtrl(userFactory, carFactory, petFactory){
var vm = this;
vm.user = userFactory.getUser();
//vm.editorEnabled = false;
vm.users = userFactory.getUsers();
vm.enableEditor = function(person, index){
if(!vm.users[index].editorEnabled){
vm.users[index].editorEnabled = true;
}
};
vm.editItem = function(index){
vm.users[index].editorEnabled = true;
}
vm.doneEditing = function(user, index){
console.log(user);
//vm.users[index].editorEnabled = false;
}
vm.save = function(person, index){
console.log(person);
vm.disableEditor(index);
};
vm.disableEditor = function(index){
vm.users[index].editorEnabled = false;
};
}
var factories = angular.module("factories", []);
factories.factory('userFactory', function(){
var factory = {
getUser: getUser,
getUsers: getUsers
}
return factory;
function getUser(){
var user = {
name: "henk2",
mail: 'aaa@gmail.com'
}
return user;
}
function getUsers(){
var users = [
{
name: "Bert",
mail: 'bert@gmail.com'
},
{
name: "Giel",
mail: 'giel@gmail.com'
},
{
name: "Willem",
mail: 'willem@gmail.com'
}
];
return users;
selected: {}
}
});
factories.factory('carFactory', function(){
var factory = {
getCar : getCar
}
return factory;
function getCar(){
var car = {
color: "black",
maxSpeed: 200,
name: "Audi r8 spyder"
}
return car;
}
});
factories.factory("petFactory", function(){
var factory = {
getPet : getPet
}
return factory;
function getPet(){
var pet = {
name: "vlekje",
soort: "cat",
age: 6
}
return pet;
}
});<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="factories.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="form" ng-controller="LocationFormCtrl as vm">
<table border="2">
<tbody>
<tr ng-repeat="x in vm.users">
<form ng-submit="vm.doneEditing(x,$index)" novalidate name="form"> <td ng-dblclick="editorEnabled = !editorEnabled">
<input ng-disabled="!editorEnabled" ng-model="x.name" style="border: none;">
</td>
<td ng-dblclick="mailEnabled = !mailEnabled">
<input ng-disabled="!mailEnabled" ng-model="x.mail" ng-dblclick="vm.editItem($index)" style= "border:none;">
</td>
<td><input ng-click="vm.doneEditing(x,$index);editorEnabled =false;mailEnabled =false;" type="submit" class="btn btn-out" value="Save" /></td>
</form>
</tr>
</tbody>
</table>
<table border="2">
<tr ng-repeat="person in vm.users">
<td>
<div ng-hide="person.editorEnabled">{{ person.name }}</div>
<div ng-show="person.editorEnabled">
<input type="text" ng-model="person.name" />
</div>
</td>
<td>
<div ng-hide="person.editorEnabled">{{ person.mail }}</div>
<div ng-show="person.editorEnabled">
<input type="text" ng-model="person.mail" />
</div>
</td>
<td>
<div ng-hide="person.editorEnabled">
<div ng-click="vm.enableEditor(person, $index)">Edit</div>
</div>
<div ng-show="person.editorEnabled">
<div ng-click="vm.save(person, $index)" style="border-radius:50%; background-color:black; height:35px;width:35px;" >
<i class="fa fa-floppy-o" aria-hidden="true" style="color:white; margin-left:11px; margin-top:10px;"></i>
</div>
<div ng-click="vm.disableEditor($index)" style="border-radius:50%; background-color:black;height:35px; width:35px;">
<i class="fa fa-ban" aria-hidden="true" style="color:white; margin-left:11px; margin-top:10px;"></i>
</div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>