angularjs ng-app

简介:
<!DOCTYPE HTML>
<html ng-app>    //ng-app是初始化指令,整个页面都会被angularjs解析,写在div或者其他标签上表示只是局部的div和标签里面使用angularjs解析,其余的不用anguarjs解析。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>

function Aaa($scope,$timeout){
    $scope.name = 'hello';
    setTimeout(function(){
        $scope.name = 'hi';//setTimeout这个定时器不能刷新name的值
    },2000);
    $timeout(function(){
        $scope.name = 'hi';//$timeout是angularjs的定时器才能使name值刷新
    },2000);
    
    $scope.show = function(){
        $scope.name = 'hi';
    };
    
}

</script>
</head>

<body>
//ng-controller是控制器
<div ng-controller="Aaa" ng-click="name='hi'">  click函数改变name的值
<div ng-controller="Aaa" ng-click="show()">     作用同上
    <p>{{name}}</p>
</div>

</body>
</html>
复制代码
复制代码
<!DOCTYPE HTML>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>

function Aaa($scope,$timeout){
    $scope.name = 'hello';
}
</script>
</head>

<body>
<div ng-controller="Aaa">
    <input type="text" ng-model="name">    输入框改变标签p也改变。
    <p>{{name}}</p>
</div>
</body>
</html>
复制代码

 

复制代码
<!DOCTYPE HTML>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>

function Aaa($scope,$timeout){
    $scope.iphone = {
        money : 5,
        num : 1,
        fre : 10
    };
    $scope.sum = function(){
        return $scope.iphone.money * $scope.iphone.num;
    };
    
    /*$scope.$watch('iphone.money',function(newVal,oldVal){
        console.log(newVal);
        console.log(oldVal);
    },true);*/
    
    $scope.$watch($scope.sum,function(newVal,oldVal){ //$watch监听数据的变化
        //console.log(newVal);
        //console.log(oldVal);
        $scope.iphone.fre = newVal >= 100 ? 0 : 10;
    });
}

</script>
</head>

<body>

<div ng-controller="Aaa">
    <p>价格:<input type="text" ng-model="iphone.money"></p>
    <p>个数:<input type="text" ng-model="iphone.num"></p>
    <p>费用:<span>{{ sum() | currency:'' }}</span></p>  currency是过滤器
    <p>运费:<span>{{iphone.fre | currency:''}}</span></p>
    <p>总额:<span>{{ sum() + iphone.fre | currency:''}}</span></p>
</div>

</body>
</html>
复制代码

 


本文转自农夫山泉别墅博客园博客,原文链接:http://www.cnblogs.com/yaowen/p/5734702.html,如需转载请自行联系原作者

相关文章
|
3天前
|
移动开发 小程序
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
|
3天前
|
API 数据安全/隐私保护 iOS开发
利用uni-app 开发的iOS app 发布到App Store全流程
利用uni-app 开发的iOS app 发布到App Store全流程
114 3
|
3天前
|
Android开发 开发者 UED
个人开发 App 成功上架手机应用市场的关键步骤
个人开发 App 成功上架手机应用市场的关键步骤
|
3天前
|
开发工具 数据安全/隐私保护 Android开发
【教程】APP 开发后如何上架?
【教程】APP 开发后如何上架?
|
3天前
|
API
uni-app 146朋友圈列表api开发
uni-app 146朋友圈列表api开发
19 0
|
3天前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
13 1
|
3天前
|
前端开发 Android开发 开发者
【Flutter前端技术开发专栏】Flutter中的混合应用(Hybrid Apps)开发
【4月更文挑战第30天】本文探讨了使用Flutter开发混合应用的方法。混合应用结合Web技术和原生容器,提供快速开发和低成本维护。Flutter,一款现代前端框架,以其插件系统和高性能渲染引擎支持混合应用开发。通过创建Flutter项目、添加平台代码、使用WebView、处理平台间通信以及发布应用,开发者可构建跨平台混合应用。虽然混合应用有性能和用户体验的局限,但Flutter的跨平台兼容性和丰富的插件生态降低了开发成本。开发者应根据项目需求权衡选择。
【Flutter前端技术开发专栏】Flutter中的混合应用(Hybrid Apps)开发
|
3天前
|
移动开发 小程序 前端开发
使用uni-app开发(h5、小程序、app)步骤
使用uni-app开发(h5、小程序、app)步骤
|
3天前
|
Java Android开发 开发者
【Uniapp开发】APP的真机调试指南,从开发到上架全过程
【Uniapp开发】APP的真机调试指南,从开发到上架全过程
44 3
游戏直播APP平台开发多少钱成本:定制与成品源码差距这么大
开发一款游戏直播APP平台所需的费用是多少?对于计划投身这一领域的投资者来说,首要关心的问题之一就是。本文将探讨两种主要的开发模式——定制开发与成品源码二次开发的成本差异及其优劣势。