CODEWITHSUNDEEP
javascripthtmlangularjsbuttonhtml-table
Ian Pennebaker
Ian Pennebaker

Reputation: 245

Buttons do not work in tables?

I have an app that has buttons in a table. The button that is clicked should theoretically Hide the table and change some data. When the button is outside of the table it works fine, but inside it fails. Here is my code.
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;

});

Why wont the button work in a table?

Upvotes: 1

Views: 88

Answers (2)

craigb
craigb

Reputation: 16907

As @tymeJV pointed out the ng-repeat creates new scopes. When you are changing a primitive value on the child scope it creates a copy that hides the parent attribute. In the controller you should have an object that has the primitive attribute you want to change i.e.

$scope.tableAttrs = { hide: false };

and inside the ng-repeat markup you would use:

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

heres a blog post explaining it (related to forms but same idea, the child scope hides the primitive value) http://zcourts.com/2013/05/31/angularjs-if-you-dont-have-a-dot-youre-doing-it-wrong/

Upvotes: 1

tymeJV
tymeJV

Reputation: 104795

That button is contained within an ng-repeat directive. ng-repeat creates it's own child scopes, so what is actually happening is you're creating a new $scope variable on the child scope called hideAttr and setting it. A couple work arounds:

  1. Define a function in your controller and call that - Angular will look up to the parent and find the method

  2. Use $parent in your ng-click method: ng-click="$parent.hideAttr = !$parent.hideAttr"

Upvotes: 4

Related Questions