Last active
August 29, 2015 14:09
-
-
Save panlw/3d0c40b00fea404f0df9 to your computer and use it in GitHub Desktop.
AngularJS Bootstrap
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* enable absolute positioning */ | |
| .inner-addon { | |
| position: relative; | |
| } | |
| /* style icon */ | |
| .inner-addon .glyphicon { | |
| position: absolute; | |
| padding: 10px; | |
| /*pointer-events: none;*/ | |
| } | |
| /* align icon */ | |
| .left-addon .glyphicon { left: 0px;} | |
| .right-addon .glyphicon { right: 0px;} | |
| /* add padding */ | |
| .left-addon input { padding-left: 30px; } | |
| .right-addon input { padding-right: 30px; } | |
| .hide { | |
| display: none; | |
| } | |
| .w { | |
| width: 750px; | |
| } | |
| .w100 { | |
| width: 100%; | |
| } | |
| .mt1 { | |
| margin-top: 1em; | |
| } | |
| .t{ | |
| font-size: 12px; | |
| border-collapse: collapse; | |
| } | |
| .t th { | |
| padding: 6px; | |
| text-align: left; | |
| vertical-align: top; | |
| color: #333; | |
| background-color: #eee; | |
| border: 1px solid #b9b9b9; | |
| } | |
| .t td { | |
| padding: 6px; | |
| background-color: #fff; | |
| border: 1px solid #b9b9b9; | |
| } | |
| .t td.nowrap { | |
| white-space: nowrap; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <!-- | |
| @see https://code.angularjs.org/1.3.2/docs/api/ng/function/angular.bootstrap | |
| @see https://code.angularjs.org/1.3.2/docs/api/ng/service/$http | |
| @see https://docs.angularjs.org/guide/di | |
| --> | |
| <meta charset="UTF-8"> | |
| <style type="text/css" media="all"> | |
| @import url("//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"); | |
| @import url("./css/hello.css"); | |
| </style> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> | |
| <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> | |
| <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> | |
| <script> | |
| angular.module('myWebMod', []) | |
| .controller('myWebCtl', ['$scope', function($scope) { | |
| $scope.name = 'WEB'; | |
| }]); | |
| angular.module('myAppMod', ['myMvcMod']) | |
| .controller('myAppCtl', ['$scope', function($scope) { | |
| $scope.name = 'APP'; | |
| }]); | |
| angular.module('myMvcMod', []) | |
| .controller('myMvcCtl', ['$scope', function($scope) { | |
| $scope.name = 'MVC'; | |
| }]); | |
| // app common modules | |
| angular.module('myFilters', []) | |
| .filter('map', function(){ | |
| return function(rows, prop){ | |
| if (!rows || !prop) return rows; | |
| return _.map(rows, _.iteratee(prop)); | |
| }; | |
| }) | |
| .filter('uniq', function(){ | |
| return function(rows, isSorted, prop){ | |
| if (!rows) return rows; | |
| return _.uniq(rows, isSorted, !prop ? undefined : _.iteratee(prop)); | |
| }; | |
| }); | |
| // app module | |
| angular.module('myApp', ['myFilters']) | |
| .controller('myHttpCtl', ['$scope', '$http', function($scope, $http) { | |
| $http.get('./json/hello_http.json').success(function(data) { | |
| $scope.name = data.name; | |
| }); | |
| $http.get('./json/hello_list.json').success(function(rows) { | |
| $scope.rows = rows; | |
| $scope.chks = _.uniq(_.map(rows, _.iteratee('チェックID'))); | |
| }); | |
| }]); | |
| // bootstrap | |
| angular.element(document).ready(function() { | |
| angular.bootstrap(document, [ | |
| 'myWebMod', 'myAppMod', 'myApp' | |
| ], { | |
| strictDi: true | |
| }); | |
| angular.element('.my-clearable > i').on('click', function(evt){ | |
| angular.element(this).parent().find('input').val('').trigger('input'); | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="hide"> | |
| <div ng-init="firstName = 'John'; lastName = 'Doe';"> | |
| <strong>First name:</strong> {{firstName}}<br /> | |
| <strong>Last name:</strong> <span ng-bind="lastName"></span><br /> | |
| <br /> | |
| <label>Set the first name: <input type="text" ng-model="firstName"/></label><br /> | |
| <label>Set the last name: <input type="text" ng-model="lastName"/></label> | |
| </div> | |
| <div ng-controller="myWebCtl"> | |
| Hello {{name}} in AngularJS! | |
| </div> | |
| <div ng-controller="myAppCtl"> | |
| Hello {{name}} by AngularJS! | |
| </div> | |
| <div ng-controller="myMvcCtl"> | |
| Hello {{name}} by AngularJS! | |
| </div> | |
| <hr/> | |
| </div> | |
| <div class="container w" ng-controller="myHttpCtl"> | |
| <h1>Hello {{name}} by AngularJS!</h1><hr/> | |
| <div class="row"> | |
| <div class="col-xs-4"> | |
| <button class="btn btn-primary">整形処理</button> | |
| <button class="btn btn-primary">チェック結果</button> | |
| </div> | |
| <div class="col-xs-8"> | |
| <form class="navbar-form navbar-right" role="search"> | |
| <!-- | |
| // multi-calls when one ope, so it is low performance, | |
| // use $scope.chks in controller or cache the results. | |
| --> | |
| <select class="form-control" ng-model="q" | |
| ng-options="chk for chk in rows | map: 'チェックID' | uniq"> | |
| <option value=""></option> | |
| </select> | |
| <div class="my-clearable form-group inner-addon right-addon"> | |
| <input ng-model="q" class="form-control" type="text" placeholder="Search" /> | |
| <i ng-show="q" class="glyphicon glyphicon-remove"></i> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <table class="t w100 mt1"> | |
| <thead> | |
| <tr> | |
| <th>調査週</th> | |
| <th>KEY</th> | |
| <th>チェックID</th> | |
| <th>説明</th> | |
| <th>不具合条件</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr ng-repeat="row in rows | filter: q as results"> | |
| <td>{{row['調査週']}}</td> | |
| <td>{{row['KEY']}}</td> | |
| <td>{{row['チェックID']}}</td> | |
| <td>{{row['説明']}}</td> | |
| <td>{{row['不具合条件']}}</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </body> | |
| </html> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
[IIS] Add mime for JSON (.json -> application/json)
@see http://www.ipentec.com/document/document.aspx?page=windows-iis-add-mime-type