標籤：angularjs ng-cloak
# 使用ng-cloak 及樣式.ng-cloak<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src=‘js/angular.min.js‘> </script> <style type="text/css"> .ng-cloak{display:none;} </style> </head> <body ng-app="hd" ng-cloak class="ng-cloak"> <div ng-controller="ctrl"> <!--商品名稱：{{goods.name}}<br /> 商品價格：{{goods.price}}<br /> 商品數量：{{goods.num}}<br /> 商品總價：{{goods.price*goods.num}}<br /> <input type="button" value="+" ng-click="add()"/> <input type="button" value="-" ng-click="reduce()" />--> 商品名稱：{{goods.data.name}}<br /> 商品價格：{{goods.data.price}}<br /> 商品數量：{{goods.data.num}}<br /> 商品總價：{{goods.data.price*goods.data.num}}<br /> <input type="button" value="+" ng-click="goods.add()"/> <input type="button" value="-" ng-click="goods.reduce()" /> </div> <script type="text/javascript"> var m=angular.module(‘hd‘,[]) m.controller(‘ctrl‘,[‘$scope‘,function($scope){// $scope.goods={‘name‘:‘iphone‘,‘price‘:3000,‘num‘:0}// $scope.add=function(){$scope.goods.num=Math.min(++$scope.goods.num,6)}// $scope.reduce=function(){$scope.goods.num=Math.max(--$scope.goods.num,0)} $scope.goods={ data:{‘name‘:‘iphone‘,‘price‘:3000,‘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>
angularjs-ng-cloak 解決閃屏問題
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
