[Popup] AngularJSでPopup上に配置したInputコントロールの値をスコープを使用して取得する方法

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/interop/angular/wijmo.angular.min.js"></script>
<div ng-app="app" ng-controller="appCtrl">
    <button id="popupOwner">
        ポップアップ表示
    </button>
    <wj-popup owner="#popupOwner">
        <wj-input-number value="ctx.numVal"></wj-input-number><br />
        <wj-input-date value="ctx.dateVal"></wj-input-date><br />
        <wj-combo-box items-source="data" display-member-path="country" selected-value-path="id" ng-model="ctx.comVal"></wj-combo-box><br />
        <button ng-click="click()">値取得</button>
    </wj-popup>
</div>

JavaScript

var app = angular.module('app', ['wj']);
app.controller('appCtrl', function appCtrl($scope) {
    var data = [],
    countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
    for (var i = 0; i < countries.length; i++) {
        data.push({
            id: i,
            country: countries[i]
        })
    }

    $scope.ctx = {};
    $scope.data = data;

    $scope.click = function () {
        var mes = 'inputNumber : ' + $scope.ctx.numVal + '\n';
        mes = mes + 'inputDate : ' + $scope.ctx.dateVal + '\n';
        mes = mes + 'ComboBox : ' + $scope.ctx.comVal;
        alert(mes);
    }
});