angularjs入門-ng-click
今天想要來談一下click的功能，很多狀況會用到click的功能，不管是改變狀況，或者是搜尋然後送出一個ajax跟web api取資料等等，當然為了不涉及一些還沒講過的directive，我會盡量講簡單一點，好懂
一點的demo，假設我們有兩個input值，按下計算之後要在畫面馬上呈現計算的值，下面是示意圖
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
.change-color-true {
background-color: red;
}
</style>
</head>
<body ng-app="App">
<div ng-controller="FirstCtrl">
<input type="text" ng-model="a" class="form-control" />
<input type="text" ng-model="b" class="form-control"/>
<input type="button" ng-click="calculateClick()" value="計算" class="btn btn-default" />
{{c}}
</div>
<script src="Scripts/angular.js"></script>
<script>
angular.module('App', [])
.controller('FirstCtrl', function ($scope) {
$scope.calculateClick = function () {
$scope.c =Number( $scope.a) +Number( $scope.b);
}
});
</script>
</body>
</html>
當然我們也可以在click裡面加入一個值，然後做運算，比如我要再乘於2
<div ng-controller="FirstCtrl">
<input type="text" ng-model="a" class="form-control" />
<input type="text" ng-model="b" class="form-control"/>
<input type="button" ng-click="calculateClick(2)" value="計算" class="btn btn-default" />
{{c}}
</div>
<script src="Scripts/angular.js"></script>
<script>
angular.module('App', [])
.controller('FirstCtrl', function ($scope) {
$scope.calculateClick = function (num) {
$scope.c =(Number( $scope.a) +Number( $scope.b))*2;
}
});
</script>
</body>
我們也可以直接新增陣列元素或操作陣列，如下例子
<div ng-controller="FirstCtrl">
<input type="text" ng-model="people.name" class="form-control" />
<input type="text" ng-model="people.sex" class="form-control"/>
<input type="button" ng-click="calculateClick()" value="新增" class="btn btn-default" />
<ul ng-repeat="item in people">
<li>{{item.name}}-{{item.sex}}</li>
</ul>
</div>
<script src="Scripts/angular.js"></script>
<script>
angular.module('App', [])
.controller('FirstCtrl', function ($scope) {
$scope.people = [
{ name: 'anson', sex: 'boy' },
{ name: 'andy', sex: 'boy' },
{ name: 'coco', sex: 'girl' },
{ name: 'lucky', sex: 'dog' },
{ name: 'micky', sex: 'mouse' },
];
$scope.calculateClick = function () {
$scope.people.push($scope.people);
}
});
</script>
</body>
下面就來個例子，用ng-click達成新增和修改陣列的功能，這裡用簡單的方式來示範操作陣列，下面是例子
<div ng-controller="FirstCtrl">
<input type="text" ng-model="emp.name" class="form-control" />
<input type="text" ng-model="emp.sex" class="form-control" />
<input type="button" ng-click="addClick()" value="新增" class="btn btn-default" />
<hr />
<ul ng-repeat="item in people">
<li><input type="button" value="修改" ng-click="editClick(item)" class="btn btn-primary" /> {{item.name}}-{{item.sex}}</li>
</ul>
</div>
<script src="Scripts/angular.js"></script>
<script>
angular.module('App', [])
.controller('FirstCtrl', function ($scope) {
$scope.people = [
{ name: 'anson', sex: 'boy' },
{ name: 'andy', sex: 'boy' },
{ name: 'coco', sex: 'girl' },
{ name: 'lucky', sex: 'dog' },
{ name: 'micky', sex: 'mouse' },
];
$scope.addClick = function () {
$scope.people.push($scope.emp);
}
$scope.editClick = function (item) {
$scope.emp = item;
}
});
</script>
</body>
然後還有一種ng-dblclick也就是點擊兩下的意思，操作模式大同小異，就不多說明
以上請大家指教，希望能幫助到人
