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

Using ng-repeat I want to use ng-model and ng-show to subjectively select an area to expand for the purpose of updating pet, place or points. Right now, it shows for all p in Pets within ng-repeat but I only want it to show for the single p's update button that is clicked. Extra points if you can show me how to close it when the update button is clicked again. Here is my html with Angularjs directives:

使用ng-repeat，我想使用ng-model和ng-show主观地选择一个区域进行扩展，以更新pet、位置或点。现在，它显示了在ng-repeat中所有的宠物的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>

The show(); function

show();函数

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

1 个解决方案

#1

Sometimes, going back to basics works the best. Since we know each iteration in ng-repeat creates a new scope, in order to avoid using the inherited show function, a simple showing != showing should work (even though it's undefined by default, it's fine since that's a falsy value, but you can always initialize it as well).

有时候，回归基本原则是最有效的。由于我们知道ng-repeat中的每个迭代都会创建一个新的范围，为了避免使用继承的show函数，一个简单的show !

See it here:

看这里:

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>

---

If you don't like this approach and want to use one common function (there are reasons you'd do that, but I don't see them in your example), you can use ng-repeat indices, and then do something like:

如果您不喜欢这种方法，并希望使用一个通用函数(您这样做是有原因的，但是我在您的示例中没有看到)，您可以使用ng-repeat索引，然后执行以下操作:

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

And simply invoke it like this:

简单地这样调用它:

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

and control the visibility like this:

像这样控制能见度:

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

See it here:

看这里:

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>