如何使用 ng-repeat 从 Angularjs 表中隐藏行答案

【问题标题】：How to hide rows using ng-repeat from Angularjs table如何使用 ng-repeat 从 Angularjs 表中隐藏行
【发布时间】：2016-09-20 13:11:06
【问题描述】：

我是 Angular 的新手，也是 stackoverflow 的新手，这是我的第一个问题。

所以我正在构建一个角度表，到目前为止，上帝，我已经完成了添加数据和删除数据，棘手的部分是编辑表中的数据。
我创建了两个输入文本并将它们与 ng-model 和表中的数据绑定，
但是当我单击编辑按钮时，它会从表中抓取所有数据，但我只想编辑我单击的那个编辑，
我猜我应该隐藏其他行，或者我应该让 ng-model 不抓取所有数据。我尝试了一些他们没有用的东西。我尝试了 google 和 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 = 角度 .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) {

                $scope.current = ppl;
                };

               $scope.current = {};


               $scope.save = function(ppl) {

                $scope.current = {};
               };


               $scope.selectedIndex = '';


                 });

这是我的应用的链接： http://plnkr.co/edit/vsB5lRB15RiQn6wH2kHp?p=preview

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

【问题讨论】：

标签： javascript jquery html angularjs

【解决方案1】：

检查更新的代码。

您的数据在 ng-repeat 中，为了使您的 ng-model 为每个项目动态化，您需要使用它的 $index 创建动态 ng-model。

current[productIndex].name
current[productIndex].sport

要确定单击了哪个编辑项，请将当前单击的项目及其索引传递给它们以分配编辑数据。

ng-click="edit(ppl, productIndex)"

最后，根据点击的item分配数据。

$scope.edit = function(ppl, index) {
      $scope.currentEdit = index;
      $scope.current = {};
      $scope.current[index] = ppl;
};

有关更多详细信息，请参阅此工作 sn-p。

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>

【讨论】：

对于@loading 的解决方案，每一行最好写成具有隔离范围的指令。 save() 和 edit() 函数将在该指令的控制器实例上。花时间学习如何编写指令永远不会太早。因此，ng-repeat 中的伪代码将是这样的指令：

【解决方案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;
};

这是一个更新的插件：

http://plnkr.co/edit/0yzkjmLtpHI87V8BApaf?p=preview

编辑：我误解了这个问题。

Edit2：继续并使用 ng-if 添加了一个 div，因此只有在当前编辑时才会显示输入和按钮。

【讨论】：

非常感谢，我也很感激您添加了 cmets，因此我了解每个代码的作用。
您能否也评论一下这段代码？我需要更好地理解它。谢谢，我知道什么是拼接，如果完全 $scope.removeRow = function (productIndex) { $scope.cities.splice(productIndex, 1);

【解决方案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 .. 等，它会在编辑时反映“当前”，但我认为它会令人困惑。

【讨论】：