Question

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

<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>

show（）;功能

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

Answer 1

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

在此处查看：

＆＃13;

undefined

＆＃13;

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}
  ];
})

＆＃13;

如果你不喜欢这种方法，并且想要使用一个常用功能（有理由你这样做，但我在你的例子中没有看到它们），你可以使用{ {1}}索引，然后执行以下操作：

<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;
}

在此处查看：

＆＃13;

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

＆＃13;

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

＆＃13;

在ng-repeat环境中选择性使用ng-show

1 个答案: