[AngularJS]3. ng-hide and ng-show
and angularjs NG show Hide
2023-09-14 09:00:56 时间
1. Use a directive to ensure that we can only see the "Add to Cart" button if the canPurchase
property is true.
<button ng-show="store.product.canPurchase">Add to Cart</button>
2. Our first gem
is so popular that we've run out of stock already! Well, Flatlander gems are pretty rare, so it shouldn't be a big surprise. Luckily there is a soldOut
property to our gem
. When a gem issoldOut
, hide the .product
element.
<div class="product row" ng-hide="store.product.soldOut">
<!DOCTYPE html> <html ng-app="gemStore"> <head> <link rel="stylesheet" type="text/css" href="bootstrap.min.css" /> <script type="text/javascript" src="angular.min.js"></script> <script type="text/javascript" src="app.js"></script> </head> <body class="container" ng-controller="StoreController as store"> <div class="product row" ng-hide="store.product.soldOut"> <h3> {{store.product.name}} <em class="pull-right">${{store.product.price}}</em> </h3> <button ng-show="store.product.canPurchase">Add to Cart</button> </div> </body> </html>(function() {var app = angular.module('gemStore', []);
app.controller('StoreController', function(){ this.product = gem; }); var gem =
{ name: 'Azurite', price: 110.50, canPurchase: false, soldOut: true };
})();
相关文章
- Internationalization(i18n) support in SAP CRM,UI5 and Hybris
- [Angular] @ViewChildren and QueryLists (ngAfterViewInit)
- [Angular2 Form] Create and Submit an Angular 2 Form using ngForm
- [AngularJS] Services, Factories, and Providers -- value & Providers
- [Unit Testing] Angular Unit Testing, ui-router, httpbackend and spy
- [AngularJS] Using the Angular scope $destroy event and method
- [AngularJS] ng-repeat and $index, $event, $log
- [AngularJS]3. ng-hide and ng-show
- AngularJS学习---REST和自定义服务(REST and Custom Services) ngResource step 11
- [AngularJS] Store the entry url and redirect to entry url after Logged in
- [Django] Creating an app, models and database
- [AngularJS] Extract predicate methods into filters for ng-if and ng-show
- [AngularJS] Lazy Loading modules with ui-router and ocLazyLoad
- [AngularJS] Consistency between ui-router states and Angular directives
- [AngularJS] Javascript scope and AngularJS $scope
- [AngularJS] ng-messages. 02 reuse and override
- [Unit Testing for Zombie] 04. Mock and Stub
- [AngularJS] ng-repeat and $index, $event, $log
- 3d button - where is OS type and version detected
- atitit.人脸识别的应用场景and使用最佳实践 java .net php
- 【ICM Technex 2018 and Codeforces Round #463 (Div. 1 + Div. 2, combined) C】 Permutation Cycle
- Stimulsoft ReportsJS and DashboardsJS. 2022.3.3
- error: no match for ‘operator<‘ (operand types are ‘Interval‘ and ‘Interval‘)(sort函数出错(不能省略第三个参数))
- CodeForces 462B Appleman and Card Game(贪心)
- 论文解读(FGSM)《Explaining and Harnessing Adversarial Examples》
- MySQL Table is marked as crashed and should be repaired —— 筑梦之路