Question

我有一个在桌子上有按钮的应用程序。理论上，单击的按钮应该隐藏表并更改一些数据。当按钮位于表格之外时，它可以正常工作，但在其内部失败。这是我的代码。
HTML：

<body link="white" vlink="white">
  <pin>Site ID</pin>
  <center>
    <h1>Site Finder</h1>
    <button ng-click="'x=0','y=0'">test</button>
    <div ng-controller="firstCtrl">

      <input type="text" ng-model="search" border="3" placeholder="Please enter site name..." ng-hide="hideAttr"/>
      <div link="white" vlink = "white"><button id="btn2" ng-click="hideAttr = !hideAttr" ng-hide="!hideAttr">Back To Search</button></div>
      <table border="1" width="100%" ng-hide="hideAttr">
        <thead>
          <tr>
            <td><center>Name</center></td>
            <td>Carrier</td>

          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="site in SiteLocs | filter : search">
            <td>
             <button id="btn1" ng-click="hideAttr = !hideAttr">
              {{site.name}}
             </button>
            </td>

            <td>
              {{site.carrier}}
            </td>
          </tr>
        </tbody>
      </table>
    </div>


  </center>
  <div id="map-canvas" ng-show="!hideAttr"></div>
</body>

</html>

JS：

(function(){

  $scope.hideAttr = true;

});

为什么按钮不能在表格中工作？

Answer 1

button指令中包含ng-repeat。 ng-repeat创建了自己的子范围，因此实际发生的是您在名为$scope的子范围上创建新的hideAttr变量并进行设置。一对夫妇在解决：

在控制器中定义一个函数并调用它 - Angular将查找父级并找到方法
在$parent方法中使用ng-click：ng-click="$parent.hideAttr = !$parent.hideAttr"

Answer 2

正如@tymeJV所指出的，ng-repeat创建了新的范围。当您更改子范围上的原始值时，它会创建一个隐藏父属性的副本。在控制器中，你应该有一个具有你想要改变的原始属性的对象，即

$scope.tableAttrs = { hide: false };

并在ng-repeat标记内使用：

<div ng-hide="tableAttrs.hide">something to hide</div>
<button ng-click="tableAttrs.hide = !tableAttrs.hide">hide</button>

下面是一篇解释它的博客文章（与形式有关但相同的想法，儿童范围隐藏了原始价值）http://zcourts.com/2013/05/31/angularjs-if-you-dont-have-a-dot-youre-doing-it-wrong/

按钮在表中不起作用？

2 个答案: