angularJs中的ng-click指令

来源：互联网发布：essential phone 知乎编辑：程序博客网时间：2024/05/16 04:31

1.引入angular.min.js

2.创建module，controller并引入

3.利用$scope作用域传入数据，并在页面显示

4.$scope中定义add和reduce方法，页面中用ng-click调用方法，处理点击事件。

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <script src="angular.min.js"></script></head><body ng-app="module"><div ng-controller="ctrl">    商品名称:{{goods.data.title}} <br/>    价格:{{goods.data.price}}<br/>    购买数量: {{goods.data.num}} 件<br/>    总计:{{goods.data.price*goods.data.num}} 元<br/>    <button ng-click="goods.add()">增加</button>    <button ng-click="goods.reduce()">减少</button></div><script>    var m = angular.module('module', []);    m.controller('ctrl', ['$scope', function ($scope) {        $scope.goods = {            data: {'title': 'apple mac', 'price': 300, 'num': 0},            add: function () {            $scope.goods.data.num =Math.min(++$scope.goods.data.num, 100);            },            reduce: function () {            $scope.goods.data.num = Math.max(--$scope.goods.data.num, 0);            }        }    }]);</script></body></html>

阅读全文

0 0