2019年10月31日 星期四

於 controller 外取得 scope 物件

<div ng-app="module1" ng-controller="ctrl" id="divctrl">

var scope = angular.element(document.getElementById('divctrl')).scope();
scope.$apply(function () {
  scope.speakers = ['11','22'];
});

2019年10月30日 星期三

UI-Calendar 使用說明

安裝套件: fullcalendar, UI-Calendar

javascript
====
 <script type='text/javascript' src="Scripts/moment.min.js"></script>
    <script type='text/javascript' src="Scripts/fullcalendar/fullcalendar.min.js"></script>
    <script type='text/javascript' src="Scripts/fullcalendar/gcal.min.js"></script>
    <script type='text/javascript' src="Scripts/fullcalendar/locale/zh-tw.js"></script>
    <link href="content/fullcalendar.min.css" rel="stylesheet" type="text/css" />
    <script type='text/javascript' src="Scripts/calendar.js"></script>
angular.module('module1', ['ui.calendar', 'ui.bootstrap'])
            .controller("ctrl1", function ($scope, $http, $filter, $compile, $timeout, uiCalendarConfig) {
$scope.eventRender = function (event, element, view) {
                    element.attr({
                        'title': event.title,
                        'tooltip-append-to-body': true,
                    });
                    $compile(element)($scope);
                };
 $scope.getCalendar = function () {
                    if ($scope.eventSources.length > 0) $scope.eventSources.splice(0, $scope.eventSources.length);
                    $http.post('...', { from: $scope.from || null, to: $scope.to || null })
                        .then(function (result) {
                            $scope.eventSources.push(result.data);
                        });
                }
                $scope.uiConfig = {
                    calendar: {
                        displayEventTime: false,
                        eventRender: $scope.eventRender,
                        viewRender: function (view, element) {
                             if (!$scope.from || $scope.from.toLocaleString() != view.start.toLocaleString()) {
                    $scope.from = view.start;
                    $scope.to = view.end;
                    $scope.getCalendar();
                }
                        },
                        dayClick: function (date, allDay, jsEvent, view) {
                            $scope.date = new Date(date);
 $('td.fc-past,td.fc-future').css({ "color": "unset", "backgroundColor": "unset" });
                            $('td.fc-today').css({ "color": "unset", "backgroundColor": "#fcf8e3" });
                            var MyDateString = $scope.date.getFullYear() + '-'
                                + ('0' + ($scope.date.getMonth() + 1)).slice(-2)
                                + "-" + ('0' + $scope.date.getDate()).slice(-2);
                            $('[data-date=' + MyDateString + ']').css({ "color": "red", "backgroundColor": "yellow" });
                        },
                        eventClick: function (event) {
                        }
                    }
                };
                $scope.eventSources = [];

html
====
<div ui-calendar="uiConfig.calendar" class="calendar" ng-model="eventSources" calendar="myCalendar"></div>

c#
====
var list = db.table1.Where(a => ...).AsEnumerable().Select(a => new { title =a.title, start = a.date1, end = a.date2, backgroundColor = "orange" });

2019年10月23日 星期三

filter 不穩定問題

ng-repeat="obj in activitys | filter: {'地點':location.value}"
有時 location.value 改變不會發生作用
只能改變寫法

ng-repeat="obj in activityfilters()"
$scope.activityfilters = function () {
                    if (!$scope.location) return null;
                    return Enumerable.From($scope.activitys).Where('$.地點==' + $scope.location.value).ToArray();
                }

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

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