Created
February 21, 2014 17:55
-
-
Save konn/9139483 to your computer and use it in GitHub Desktop.
AngularJS 製のカタカナ抜け文・漢字抜け熟語を解くのの支援ツール。現状だと変更のある度に再描画しているので、文章が長くなってくるとかなり重くなる。ある程度まで別エディタで編集してからこまめに貼り付けると良いかもしれない。
This file contains 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
| angular.module('compile', [], function($compileProvider) { | |
| $compileProvider.directive('compile', function($compile) { | |
| return function(scope, element, attrs) { | |
| scope.$watch( | |
| function(scope) { | |
| return scope.$eval(attrs.compile); | |
| }, | |
| function(value) { | |
| var re = /\[\s*(\d+)\s*\]/g; | |
| var numArr; | |
| var inp = "<input size=\"1\" type=\"text\" ng-model=\"answer[$1-1]\">"; | |
| element.html(value.replace(re, inp).replace(/\n/g, "<br>")); | |
| $compile(element.contents())(scope); | |
| } | |
| ); | |
| }; | |
| }) | |
| }); | |
| function Ctrl($scope) { | |
| $scope.answer = []; | |
| $scope.template = ""; | |
| $scope.fill = function() { | |
| var re = /\[\s*(\d+)\s*\]/g; | |
| var numArr; | |
| while ((numArr = re.exec($scope.template)) !== null) { | |
| var num = numArr[1]; | |
| $scope.answer[Number(num)-1] = $scope.answer[Number(num)-1] || String(Number(num)); | |
| }; | |
| }; | |
| } | |
This file contains 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> | |
| <meta charset="utf-8"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> | |
| <script src="app.js"></script> | |
| </head> | |
| <body ng-app="compile"> | |
| <div ng-controller="Ctrl"> | |
| <h1>カタカナ抜け文とか漢字抜け熟語支援</h1> | |
| <p> | |
| <textarea rows="10" cols="75" ng-model="template"></textarea><br> | |
| <a href="" ng-click="fill()">Fill</a> | |
| </p> | |
| <h2>本文</h2> | |
| <p compile="template" id="contents"></p> | |
| <h2>答え</h2> | |
| <span ng-repeat="char in answer"> | |
| <label for="ans-{{$index}}">{{$index+1}}</label> | |
| <input size=1 id="ans-{{$index}}" type="text" ng-model="answer[$index]"> | |
| </span> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment