как передать значение из шаблона angularjs в контроллер?

Question

HTML код:

   <tr ng-repeat="x in products"> 
   <a href="#!/{{x.product_name}}" class="button"> {{x.product_name}}</a> 

я просто хочу получить это {{x.product_name}} , в области действия angularjs. означает, что если я нажму на любую из кнопок, она должна передать x.product_name в angularjs в контроллере. Как это сделать?

Я новичок в angularjs. Заранее спасибо.

Answer 1

1. Поместите свой код внутрь ng-app и назначьте ng-controller.
2. Обязательно добавьте свойство products в $scope из controller
3. Убедитесь, что каждый продукт содержит имя_продукта

angular.module('myApp', [])
  .controller('myController', ['$scope', function myController($scope) {
      $scope.products = [{
        product_name: 'cellphone'
      }, {
        product_name: 'laptops'
      }, {
        product_name: 'desktops'
      }];
      
      $scope.handleClick = (productName) => {
        console.log(`${productName} clicked`);
      }
    }]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>


<div ng-app="myApp" ng-controller="myController">
  <table>
    <tr ng-repeat="x in products">
      <td>
        <a href="#!/{{x.product_name}}" class="button" ng-click="handleClick(x.product_name)"> {{x.product_name}}</a>
      </td>
  </table>
</div>