Question

我是角色新手，也是堆叠溢出，这是我的第一个问题。

所以我正在构建一个角度表，到目前为止上帝，我已经完成了添加数据和删除数据，其中最棘手的部分是编辑表中的数据。
我创建了两个输入文本，并用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

点击编辑，看看会发生什么。

Answer 1

检查更新的代码。

您的数据采用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>

Answer 2

按照现在的方式，所有文本字段的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，如果这样输入和按钮只显示当前编辑。

Answer 3

您可以在范围中添加编辑字段和按钮，仅在显示为选定的编辑

时显示

    <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;在编辑时，我认为这会让人感到困惑。

如何使用Angularjs表中的ng-repeat隐藏行

3 个答案: