angular之$scope

子墨爸爸

于 2016-12-18 16:43:35 发布

阅读量317

点赞数

CC 4.0 BY-SA版权

分类专栏： Angularjs 文章标签： angular

本文链接：https://blog.youkuaiyun.com/wupd2014/article/details/53728384

Angularjs 专栏收录该内容

13 篇文章

订阅专栏

本文通过一个简单的AngularJS应用实例，展示了如何利用AngularJS的特性实现数据的双向绑定，包括商品信息的显示及数量增减操作。该示例还介绍了如何使用控制器和服务来管理数据，以及如何通过视图上的按钮触发相应的数据更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$scope服务是方法与属性的集合

$scope用于试图进行交互，使用ng-bind或者ng-model等指

数据绑定使用：{{expr}}

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
         <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> 
    </head>
    <body ng-app="hd">
        <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 type="text/javascript">
            var s=angular.module("hd",[]);
            s.controller("ctrl",['$scope',function($scope){
                $scope.goods={
                    data:{"title":"apple","price":300,"num":0},
                    add:function(){
                        $scope.goods.data.num=Math.min(++$scope.goods.data.num,6);
                    },
                    reduce:function(){
                        $scope.goods.data.num=Math.max(--$scope.goods.data.num,0);
                    }
                };
            }]);
        </script>
    </body>
</html>