Get scope data with ng-click

Question

I have a php api which updates my database, but I would like to control which item is updated with ng-click.

    app.controller('ReviewProductsController', function ($scope, $http) {

      $scope.hide_product = function () {

        $scope.message = "";

            var request = $http({
              method: "post",
              url: "/data/hideProduct.php",
              data: {
                product_code: $scope.product_code
              },
              headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
            });

      /* Check whether the HTTP Request is Successfull or not. */
      request.success(function (data) {
        $scope.message = "Product Hidden: "+data;
      });

      }

    });

How would I pass $scope.product_code to the controller from ng-click?

<tr ng-repeat="product in productsList.Items">
  <td>{{ product.product_code.S }}</td>
  ...
  <td>
    <button ng-click="hide_product()" type="button">Hide</button>
  </td>
</tr>

this should be doable .. perhaps a quick review of this [http://stackoverflow.com/questions/17039926/adding-parameter-to-ng-click-function-inside-ng-repeat-seems-not-to-work](http://stackoverflow.com/questions/17039926/adding-parameter-to-ng-click-function-inside-ng-repeat-seems-not-to-work) may be helpful -- i.e. passing the data from within ng-repeat using a function call from ng-click to the function in the controller (the controller function of course should be expecting something too) — Shehryar Abbasi, Jun 01 '15 at 21:13
awesome - as you develop this app, it might be good practice to extract away the `$http` stuff into a `service` =) — Shehryar Abbasi, Jun 01 '15 at 21:24
see these posts here on SO: [link 1](http://stackoverflow.com/questions/14773857/angularjs-and-http-request?lq=1) , [link 2](http://stackoverflow.com/questions/12505760/processing-http-response-in-service) or perhaps the blogs of Dan Wahlin, Jenkov, Ben Nadel, Todd Motto. — Shehryar Abbasi, Jun 01 '15 at 21:48

score 1 · Accepted Answer · answered Jun 01 '15 at 21:17

Just pass your ngRepeat item as a parameter.

Try this:

app.controller('ReviewProductsController', function ($scope, $http) {

  $scope.hide_product = function (code) {

    $scope.message = "";

        var request = $http({
          method: "post",
          url: "/data/hideProduct.php",
          data: {
            product_code: code
          },
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        });

  /* Check whether the HTTP Request is Successfull or not. */
  request.success(function (data) {
    $scope.message = "Product Hidden: "+data;
  });

  }

});

your HTML:

<tr ng-repeat="product in productsList.Items">
  <td>{{ product.product_code.S }}</td>

  <td>
    <button ng-click="hide_product(product.product_code)" type="button">Hide</button>
  </td>
 </tr>

Get scope data with ng-click

1 Answers1