我是角色新手，也是堆叠溢出，这是我的第一个问题。
所以我正在构建一个角度表，到目前为止上帝，我已经完成了添加数据和删除数据，其中最棘手的部分是编辑表中的数据。
我创建了两个输入文本，并用ng-model和table中的数据绑定它们，但是当我单击编辑按钮时，它会从表中搜索所有数据，但我只想编辑我点击编辑的一个，我猜测我应该隐藏其他行，或者我应该让ng-model不要抓取所有数据。我尝试了一些他们没有工作的东西。我尝试了谷歌和stackoverfllow我找到了一些例子，我应用了这些代码并编辑到我的应用程序，但它没有用。
谢谢。
<<!DOCTYPE html>
<html ng-app="incercari">
<head>
<title>incercari</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body ng-controller="firstCtrl">
<input type="text" ng-model="search" placeholder="search...">
<table class="table table-bordered">
<thead>
<tr>
<th>City</th>
<th>Sport</th>
<th>Remove<th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(productIndex, ppl) in cities | filter:search">
<td>{{ppl.name}}</td>
<td>{{ppl.sport}}</td>
<td><input type="button" class="btn btn-danger" value="Delete" ng-click="removeRow(productIndex)"/></td>
<td><a href="#" ng-click="edit(ppl)">Edit</a>
<input type="text" id="name" ng-model="current.name" value="{{current.name}}">
<input type="text" id="sport" ng-model="current.sport" value="{{current.sport}}">
<button ng-click="save(current)">Save</button></td>
</tr>
</tbody>
</table>
<form ng-submit="addData(cities)">
Add data<br />
<input type="text" placeholder="City" ng-model="cities.name" required >
<input type="text" placeholder="Sport" ng-model="cities.sport" >
<input type="submit" value="Submit" class="btn btn-primary">
<script src="app.js"></script>
</body>
</html>>
这是应用 var app = angular .module（＆＃34; incercari＆＃34;，[]） .controller（＆＃34; firstCtrl＆＃34;，function（$ scope）{
$scope.cities = [
{'name': 'New York', 'sport': 'basketball'},
{'name': 'Bucharest', 'sport': 'soccer'},
{'name': 'Sydney', 'sport': 'rugby'},
{'name': 'Toronto', 'sport': 'hockey'}
];
$scope.addData = function(cities) {
$scope.cities.push({'name': cities.name,
'sport': cities.sport,
});
$scope.cities.name = "";
$scope.cities.sport= "";
};
$scope.removeRow = function (productIndex) {
$scope.cities.splice(productIndex, 1);
};
$scope.edit = function(ppl) {
$scope.current = ppl;
};
$scope.current = {};
$scope.save = function(ppl) {
$scope.current = {};
};
$scope.selectedIndex = '';
});
以下是我的应用的链接： http://plnkr.co/edit/vsB5lRB15RiQn6wH2kHp?p=preview
点击编辑，看看会发生什么。
答案 0 :(得分：2)
检查更新的代码。
您的数据采用ng-repeat，以使您使用$ index创建动态ng模型所需的每个项目的ng模型动态。
current[productIndex].name
current[productIndex].sport
要识别单击哪个编辑项目，请使用其索引传递当前单击的项目，以便为其分配编辑数据。
ng-click="edit(ppl, productIndex)"
最后，根据点击的项目分配数据。
$scope.edit = function(ppl, index) {
$scope.currentEdit = index;
$scope.current = {};
$scope.current[index] = ppl;
};
有关详细信息，请参阅此工作代码段。
var app = angular
.module("incercari", [])
.controller("firstCtrl", function($scope){
$scope.cities = [
{'name': 'New York', 'sport': 'basketball'},
{'name': 'Bucharest', 'sport': 'soccer'},
{'name': 'Sydney', 'sport': 'rugby'},
{'name': 'Toronto', 'sport': 'hockey'}
];
$scope.addData = function(cities) {
$scope.cities.push({'name': cities.name,
'sport': cities.sport,
});
$scope.cities.name = "";
$scope.cities.sport= "";
};
$scope.removeRow = function (productIndex) {
$scope.cities.splice(productIndex, 1);
};
$scope.edit = function(ppl, index) {
$scope.currentEdit = index;
$scope.current = {};
$scope.current[index] = ppl;
};
$scope.current = {};
$scope.save = function(ppl) {
$scope.current = {};
};
$scope.selectedIndex = '';
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html ng-app="incercari">
<head>
<title>incercari</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body ng-controller="firstCtrl">
<input type="text" ng-model="search" placeholder="search...">
<table class="table table-bordered">
<thead>
<tr>
<th>City</th>
<th>Sport</th>
<th>Remove<th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(productIndex, ppl) in cities | filter:search ">
<td>{{ppl.name}}</td>
<td>{{ppl.sport}}</td>
<td><input type="button" class="btn btn-danger" value="Delete" ng-click="removeRow(productIndex)"/></td>
<td><a href="#" ng-click="edit(ppl, productIndex)">Edit</a>
<div ng-if="currentEdit == productIndex">
<input type="text" id="name" ng-model="current[productIndex].name" value="{{current_productIndex.name}}">
<input type="text" id="sport" ng-model="current[productIndex].sport" value="{{current_productIndex.sport}}">
<button ng-click="save(current)">Save</button>
</div>
</td>
</tr>
</tbody>
</table>
<form ng-submit="addData(cities)">
Add data<br />
<input type="text" placeholder="City" ng-model="cities.name" required >
<input type="text" placeholder="Sport" ng-model="cities.sport" >
<input type="submit" value="Submit" class="btn btn-primary">
<script src="script.js"></script>
</body>
</html>
答案 1 :(得分：1)
按照现在的方式，所有文本字段的ng-model始终获得相同的数据。为了解决这个问题，你可以使当前数组成为一个数组并在你的编辑函数中传递$ index，这样它只能从那个ppl获得数据，如下所示：
HTML：
<!-- Pass ppl and $index to your edit function -->
<td><a href="#" ng-click="edit(ppl, $index)">Edit</a>
<!-- ng-if to hide the inputs and button unless edit is clicked. -->
<div ng-if="currentEdit == $index">
<!-- call current[$index] instead of current -->
<input type="text" id="name" ng-model="current[$index].name" value="{{current[$index].name}}">
<input type="text" id="sport" ng-model="current[$index].sport" value="{{current[$index].sport}}">
<div>
并在您的控制器中：
//Accept ppl and index in your edit function
$scope.edit = function(ppl, index) {
$scope.currentEdit = index;
//reset current so when you press edit all other inputs will become blank.
$scope.current = {};
//set current at index to ppl
$scope.current[index] = ppl;
};
这是一个更新的plunker：
http://plnkr.co/edit/0yzkjmLtpHI87V8BApaf?p=preview
编辑：我误解了这个问题。
Edit2：向前走，并添加一个带有ng-div的div，如果这样输入和按钮只显示当前编辑。
答案 2 :(得分：0)
您可以在范围中添加编辑字段和按钮，仅在显示为选定的编辑
时显示 <span ng-if="ppl==current">
<input type="text" id="name" ng-model="current.name" value="{{current.name}}">
<input type="text" id="sport" ng-model="current.sport" value="{{current.sport}}">
<button ng-click="save(current)">Save</button>
</span>
注意：如果要显示包含正确数据的所有字段，只需将current.name替换为ppl.name ..等，它将反映＆＃34;当前＆＃34;在编辑时，我认为这会让人感到困惑。