Ionic控件之——按钮（Button)

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

一、HTML实现一个简单按钮：

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

监听按钮的点击事件:

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

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

 

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

JS中实现点击事件:

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

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

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

 

点击事件参数：

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

现在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>

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

$scope.onClickBtn = function(number){

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

二、按钮的样式：

撑满显示：

经过运行，你可能会发现上述的按钮大小和按钮文字的数量有关，如果需要显示一个撑满横向屏幕的按钮，可以在class中，增加button-full这个样式

<button class="button button-full"> 
　　我是撑满按钮
</button>

运行后可以发现按钮以横向撑满方式显示在屏幕上了

 

按钮的颜色：

是时候给按钮配上一个好看的颜色了，Ionic为基础控件