如何在ng-repeat中单击时获取元素的属性

时间:2017-12-04 22:52:27

标签: javascript jquery html angularjs

我有一个带有多个data- *属性的锚标签,锚点将使用ng-repeat重复几次。我想在单击单个元素时获取属性的值。

我使用JQuery获取属性值,使用$(this).attr('attribute')很容易。

但是,这仅适用于页面上的单个按钮。使用ng-repeat渲染多个按钮时,这不起作用。我假设这是因为多个按钮使用相同的属性名称呈现,而jquery不知道如何区分它们。如何获取所单击元素的data- *属性值?

//JQuery
//Works when only a single editButton is on the page but not when multiple buttons are rendered using ng-repeat
     $('.editButton').on('click', function () {
        var filepath_id = $(this).attr('data-filepath-id');
        var requested_filepath = $(this).attr('data-requested-filepath');
        var requested_filename = $(this).attr('data-requested-filename');
      })


//HTML
//Confirmed that each editButton element has the correct attribute values depending on the item
  tr(ng-repeat='item in vm.items')
    a.editButton.btn.btn-primary(
      data-toggle="modal",
      data-filepath-id="{{item.id}}",
      data-requested-filepath="{{item.requested_filepath}}",
      data-requested-filename="{{item.filename}}",
      href="#editFilepathPopup"
      ) Edit

1 个答案:

答案 0 :(得分:1)

认为我可以提供帮助。在angularJS中,事件监听器是html元素中的一个属性。示例:

 QJsonObject({"title":"Title1","lang":"en"})
 QJsonObject({"category":"Category1","lang":"en"})
 QJsonObject({"desc":"Description1","lang":"en"})

如果您想获得特定项目的属性,请将该项目作为参数放入事件功能中。

ng-repeat = "item in vm.items" ng-click="onClickFunction();"

现在在角度控制器中创建单击功能。您可以在此处执行更多逻辑操作,例如将值设置为控制器值。

ng-repeat = "item in vm.items" ng-click="vm.onClickFunction(item);"
相关问题