在ng-click angular.js中传递按钮ID

时间:2014-03-25 09:31:11

标签: angularjs angularjs-ng-click ionic-framework

我需要在Ionic Framework中传递按钮ID。

这是我尝试过的。

在js代码中:

angular.module('todo', ['ionic'])
.controller('TodoCtrl', function($scope) {
    {
        $scope.showAlert = function(btnId) {
            alert(btnId);
        };
    }
});

在html中:

<button id="a" class="button button-light"  data="{{button.id}}" ng-click="showAlert(data.id)">
    Click Me
</button>

O / P:undefined

<button id="a" class="button button-light"  data="{{button.id}}" ng-click="showAlert(data)">
    Click Me
</button>

O / P:undefined

<button id="a" class="button button-light"  data="{{event.id}}" ng-click="showAlert(data.id)">
    Click Me
</button>

O / P:undefined

<button id="a" class="button button-light" ng-click="showAlert(this.id)">
    Click Me
</button>

O / P:undefined

<button id="btnId" class="button button-light" ng-click="showAlert('btnId')">
    Click Me
</button>

O / P:btnId

这是在函数中直接写入按钮id的正确方法吗?

我提到了一些像this这样的答案。所以我认为我在使用它时犯了一些错误。请让我知道我需要改变什么。

2 个答案:

答案 0 :(得分:41)

哟,看看这个要点:

https://gist.github.com/lc-nyovchev/ed0a640a82a0f2dfd5a1

这是一种非常简单和天真的方式。

<div data-ng-init="btnId='asd';">
    <button data-ng-attr-id="btnId" class="button button-light" data-ng-click="showAlert(btnId)">
        Click Me
    </button>
</div>

或者你可以拥有你的控制器:

$scope.btnId = 'asd'; 

然后你不需要ng-init块div。

或者您可以在ng-click中获取$ event的句柄,并获取其目标,然后获取其ID,但我不建议这样做,这不是有意义的做事方式:

<button id="bla" class="button button-light" data-ng-click="showAlert($event)">
    Click Me
</button>


$scope.showAlert = function(event){
    alert(event.target.id);
}

答案 1 :(得分:3)

如果没有转发器,这是有效的,如果转发器的数据属性应该有不同的名称,其次是event.CurrentTarget.Id将使它工作。