1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162 |
- <!DOCTYPE html>
- <html lang="en" ng-app='fea5'>
- <head>
- <meta charset="UTF-8">
- <title>AngularJS Silifonov</title>
- <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>
- </head>
- <body>
- <div class="container" ng-controller="Main">
- <div class="page-header"><h1>Hello</h1></div>
- <h2 ng-hide="x > y">Hide</h2>
- <h2 ng-show="x > y">Show</h2>
- <h3 ng-if="false">ng-If</h3>
- <div ng-switch="color">
- <div ng-switch-when="red">red</div>
- <div ng-switch-when="blue">blue</div>
- <div ng-switch-default>Default</div>
- </div>
- <input type="number" name="name" ng-model='value'> <span>+ 1 = {{value + 2}} {{x + y}}</span>
- <div>{{data}}</div>
- <ol>
- <li ng-repeat="item in data track by $index">{{item}} <button ng-click="deleteItem($index)">x</button> </li>
- </ol>
- <span>{{ x + 2 + y}} {{text}}</span>
- <input type="number" name="textInput" ng-model='x'>
- <button class="btn btn-info" ng-click="sum()">+</button>
- <input type="number" name="textInput" ng-model='y'>
- <span>{{result}}</span>
- </br>
- <input type="text" name="inputText" ng-model="item">
- <button ng-click="addItem()">Add to array</button>
- </br>
- <section class="row">
- <h2>Shape Maker</h2>
- <div class="col-xs-6">
- <label for="width">Width</label>
- <input type="number" name="width" value={{style.width}} ng-model='style.width'></br>
- <label for="width">Height</label>
- <input type="number" name="height" value={{style.height}} ng-model='style.height'></br>
- <label for="background">Background</label>
- <input type="text" name="background" value="#" placeholder="#" ng-model='style.background'></br>
- <select name="22" ng-model='style.background'>
- <option value="blue">Blue</option>
- <option value="yellow">Yellow</option>
- <option value="green">Green</option>
- </select>
- </div>
- <div class="col-xs-3" ng-style="{background: style.background, height: style.height + 'px', width: style.width + 'px'}">
- AREA
- </div>
- </section>
- </div>
- <script src="node_modules/angular/angular.js"></script>
- <script src="app/app.module.js"></script>
- <script src="app/controllers/main.controller.js"></script>
- </body>
- </html>
|