2

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

演出（）; 功能

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

1 回答 1

3

有时，回归基础效果最好。因为我们知道每次迭代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>

于 2015-04-27T23:25:56.823 回答