Ionic Control-Buttons (button)

The ionic offers a wide range of button features enough to meet the needs of most button implementations.

The HTML defines a button:

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

Click events for the Monitor button:

Usually a button is clicked by the user, will certainly trigger a function, such as submitting a form, confirm selection, pop-up prompts and so on, so the monitoring of the button click, and trigger the click to deal with the event logic is the most common development requirements in ionic development.

1. Add an event to Ng-click in HTML:

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

2, JS in the implementation of click events:

In the above interface is bound to the JS file, to achieve the corresponding click Logic, we first implement a click after the popup prompt box of simple logic:

$scope. onclickbtn = function () {
    Alert ("Hello World");
};

It is important to note that the Click event function name under $scope scope in JS must match the function name in the Ng-click defined in the HTML.

3. Click event Parameters:

Usually when there are more than one button in the interface, you can define different buttons according to the above method, and bind the event functions of different names to achieve their respective logic. But if there is a button for each cell option in a large list of data, it is not possible to define countless different events. At this point, you need to pass parameters to notify a button event and decide which button to come from.

Now three buttons are defined in the HTML, and in parentheses in the Ng-click event, different parameters are added.

<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 in the implementation of the event monitoring with parameters:

$scope. onclickbtn = function (number) {

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

Ionic Control-Buttons (button)