2017年5月18日 星期四

angularjs 的 document.ready

angular.element(document).ready(function () {
            $scope.get();
        });


PS. 有些於 controller 中要直接顯示 html 的情況必須在 ready 中呼叫,才能正確顯示,例如透過 AngularJS Toaster 顯示小視窗
PS. Toastr  於 angularjs 中會有 blocking 問題,必須改用 AngularJS Toaster

2017年5月15日 星期一

enter 模擬 tab 行為

.directive("entertab", function () {
    return {
        link: function (scope, element, attrs, ngModel) {
            element.on('keydown', function (event) {
                var key = event.which || event.keyCode;
                if (key == 13) {
                    var parent = $(element).parent()[0].localName == "div" ? $(element).parent():$(element).parent().parent(); // 依階層結構自行調整寫法
                    for (var i = 1; i <= 30; i++) { // 避開ng-hide,最多找30次,不然就放棄
                        parent = $(parent).next($(parent)[0].localName);
                        if (parent.length==0) break;
                        if ($(parent).attr("class") != "ng-hide") {
                            var nextchild = $(parent).find('input:not(.ng-hide,:disabled, [readonly="readonly"], [disabled="disabled"]),select:not(:disabled, [readonly="readonly"], [disabled="disabled"]),button:not(:disabled, [disabled="disabled"])');
                            if (nextchild.length > 0) {
                                $(nextchild).first().focus();
                                event.preventDefault();
                                break;
                            }
                        }
                    }
                }
            });
        }
    }
})

2017年5月8日 星期一

ng-options 正確顯示空白字元且不要被合併

必須把空白字元轉成 String.fromCharCode(160),無法使用 &nbsp; 或標準空白(ascii 32)
&nbsp; 於 ng-options 中會直接顯示成 &nbsp;
標準空白於 html 中連續出現則會自動合併
ascii 160 表示不換行空格,同時具備不會於 html 中自動被合併的特性
不換行空格 - 維基百科

javascript
====
angular.module('commonModule', []).service('commonService', function () {
    var self = this;
    self.replaceSpaces = function (str) {
        return str.replace(/ /g, String.fromCharCode(160));
    };
});
angular.module('module1', ['agGrid', 'ui.bootstrap', 'fiestah.money', 'commonModule'])
.controller('detailCtrl', function ($scope, $http, $window, $filter, $timeout, $uibModalInstance, commonService) {
        $scope.commonService = commonService;


html
====
<select style="font-family:MingLiU !important" class='form-control' ng-change="selectATLINK(1)" ng-model='selectData.ATLINKObject_1' ng-options='commonService.replaceSpaces(a.text) for a in selectData.atlinks_1' ng-show='selectData.atlinks_1.length>0'>

input 連結 datalist 用程式控制彈出選項

範例: nextTick(() => document.querySelector('input').showPicker());  ※僅支援現代瀏覽器