Ionic控件之——按钮（Button)

标签：

Ionic提供丰富的按钮特性，足以满足大部分的按钮实现需求。

HTML定义一个按钮：

<button class="button">
  我是按钮
</button>

监听按钮的点击事件:

通常一个按钮被用户点击后，一定会触发一个功能，例如提交表单、确认选择、弹出提示等等，因此对按钮点击的监听，以及触发点击后要处理的事件逻辑是在Ionic开发中最常见的开发需求。

1、在html中为ng-click添加一个事件：

<button class="button" ng-click="onClickBtn()">
  我是按钮
</button>

2、JS中实现点击事件:

在上述界面相绑定的JS文件中，实现对应的点击逻辑，我们先实现一个点击后弹出提示框的简单逻辑：

$scope.onClickBtn = function(){
    alert("Hello World");
};

特别要注意的是，JS中$scope作用域下的点击事件函数名必须和html中定义的ng-click中的函数名一致。

3、点击事件参数：

通常界面中有多个按钮时，可以按照上述方法，定义不同的按钮，并绑定不同名字的事件函数，达到各自实现各自逻辑的目的。但是如果在一个大量的数据列表中，每一个单元选项都有一个按钮时，我们不可能去定义无数个不同的事件。此时就需要通过传递参数来通知一个按钮事件，并进行判断来自哪一个按钮。

现在Html中定义三个按钮，并在ng-click事件中的括号里，补充不同的参数。

<button class="button" ng-click="onClickBtn(1)">
  我是按钮
</button>

<button class="button" ng-click="onClickBtn(2)">
  我是按钮
</button>

<button class="button" ng-click="onClickBtn(3)">
  我是按钮
</button>

4、JS中实现带参数的事件监听：

$scope.onClickBtn = function(number){

    alert("I‘m No." + number);
};

Ionic控件之——按钮（Button)

标签：

原文地址：http://www.cnblogs.com/wt616/p/5044783.html