在 ng-repeat 的上下文中选择性地使用 ng-show

Question

使用 ng-repeat 我想使用 ng-model 和 ng-show 主观地 select 扩展一个区域以更新宠物、地点或点数。现在，它显示了 ng-repeat 中 Pets 中的所有 p，但我只希望它显示被单击的单个 p 的更新按钮。如果您能告诉我如何在再次单击更新按钮时关闭它，则加分。这是我的 html 和 Angularjs 指令：

<table>
<thead>
       <tr>
           <th colspan="1" class="text-center">
             Pets, Places and Points   
           </th>
           <th colspan="1" class="text-center">
              Update
           </th>
       <tr>
<thead>

<tbody filter-list="search"ng-repeat="p in Pets">

<tr>

   <td class="col-xs-6 col-sm-6 col-md-6 col-xl-6 merchant">
        {{p.pet}}, {{p.place}} and {{p.points}}
   </td>

    <td class="col-xs-4 col-sm-4 col-md-4 col-xl-4 update">
        <button ng-click="show()">Update</button>
        <br>
        <div ng-show="showing">
             <input  placeholder= "Pets" ng-model="Pets"/>
             <br>
             <input  placeholder= "Places" ng-model="Places"/>
             <br>
             <input  placeholder= "Points" ng-model="Points"/>
             <br>
             <button  ng-click="Update(Pets, Places, Points)">Enter</button>
         </div>       
    </td>
</tr>

</tbody>
</table>

演出();函数

$scope.show = function() {
      console.log("show")
      $scope.showing = true;
    }

Answer 1

有时候，回归基础最有效。因为我们知道 ng-repeat 中的每次迭代都会创建一个新范围，为了避免使用继承的 show 函数，一个简单的 showing != showing 应该可以工作（即使默认情况下它是 undefined ，这很好，因为这是一个虚假值，但您也可以随时对其进行初始化）。

在此处查看：

angular.module('app', [])
.controller('Ctrl', function($scope) {
  $scope.Pets = [
    {pet: 1, place: 1, points: 1},
    {pet: 2, place: 2, points: 2},
    {pet: 3, place: 3, points: 3}
  ];
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
  <table>
    <thead>
      <tr>
        <th colspan="1" class="text-center">
          Pets, Places and Points
        </th>
        <th colspan="1" class="text-center">
          Update
        </th>
        <tr>
          <thead>

            <tbody ng-repeat="p in Pets">

              <tr>

                <td class="col-xs-6 col-sm-6 col-md-6 col-xl-6 merchant">
                  {{p.pet}}, {{p.place}} and {{p.points}}
                </td>

                <td class="col-xs-4 col-sm-4 col-md-4 col-xl-4 update">
                  <button ng-click="showing = !showing">Update</button>
                  <br>
                  <div ng-show="showing">
                    <input placeholder="Pets" ng-model="Pets" />
                    <br>
                    <input placeholder="Places" ng-model="Places" />
                    <br>
                    <input placeholder="Points" ng-model="Points" />
                    <br>
                    <button ng-click="Update(Pets, Places, Points)">Enter</button>
                  </div>
                </td>
              </tr>

            </tbody>
  </table>
</div>

如果您不喜欢这种方法并想使用一个通用函数（您这样做是有原因的，但我在您的示例中没有看到），您可以使用 ng-repeat指数，然后做类似的事情：

$scope.show = function(i) {
  console.log("showing " + i)
  $scope.showing[i] = true;
}

然后像这样调用它：

<button ng-click="show($index)">Update</button>

并像这样控制可见性：

<div ng-show="showing[$index]">

在此处查看：

angular.module('app', [])
.controller('Ctrl', function($scope) {
  $scope.showing = [];
  $scope.Pets = [
    {pet: 1, place: 1, points: 1},
    {pet: 2, place: 2, points: 2},
    {pet: 3, place: 3, points: 3}
  ];
  $scope.toggle = function(i) {
    console.log("show")
    $scope.showing[i] = !$scope.showing[i];
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
  <table>
    <thead>
      <tr>
        <th colspan="1" class="text-center">
          Pets, Places and Points
        </th>
        <th colspan="1" class="text-center">
          Update
        </th>
        <tr>
          <thead>

            <tbody ng-repeat="p in Pets">

              <tr>

                <td class="col-xs-6 col-sm-6 col-md-6 col-xl-6 merchant">
                  {{p.pet}}, {{p.place}} and {{p.points}}
                </td>

                <td class="col-xs-4 col-sm-4 col-md-4 col-xl-4 update">
                  <button ng-click="toggle($index)">Update</button>
                  <br>
                  <div ng-show="showing[$index]">
                    <input placeholder="Pets" ng-model="Pets" />
                    <br>
                    <input placeholder="Places" ng-model="Places" />
                    <br>
                    <input placeholder="Points" ng-model="Points" />
                    <br>
                    <button ng-click="Update(Pets, Places, Points)">Enter</button>
                  </div>
                </td>
              </tr>

            </tbody>
  </table>
</div>

在 ng-repeat 的上下文中选择性地使用 ng-show

Selective use ng-show in the context of ng-repeat

javascript

angularjs

angularjs-ng-repeat

angularjs-ng-show