在HTML中按计算值设置scopr值

时间:2017-01-17 18:17:23

标签: javascript angularjs angularjs-directive

这是Shamsi date tiem中日期时间选择器的示例代码

问题是我不知道如何设置范围变量gdate gdate是html中的计算值,请选择时间

我想在gdate

范围内设置我的模型数据或新列

谢谢。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ng-jalaali-flat-datepicker demo</title>
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,300,600' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="https://thg303.github.io/jalaali-datepicker-demo/dist/ng-jalaali-flat-datepicker.min.css">
        <style>
            * { font-family: 'tahoma'; direction: rtl;}
        </style>
    </head>
    <body ng-app="testApp" ng-strict-di>

        <div ng-controller="mainController">

            <h1>نمایش دیت پیکر برای تقویم جلالی </h1>

            <input type="text" name="date" ng-jalaali-flat-datepicker datepicker-config="datepickerConfig" gregorian-formatted-picked-date="gfdate" gregorian-picked-date="gdate" ng-model="date">
            یا
            <button ng-jalaali-flat-datepicker ng-model="date2" type="button" name="button">تاریخی انتخاب کنید</button>

            <p>مقادیر حاصل از فیلد متنی
              <ul ng-show="gdate">
                <li> {{ date | json }} </li>
                <li> {{ gdate | json }} </li>
                <li> {{ gfdate }} </li>
              </ul>
            </p>
            <p>حاصل انتخاب تاریخ با دکمه:
              <ul ng-show="date2">
                <li>{{ date2 | json }}</li>
              </ul>
            </p>
        </div>

        <!-- JS -->
        <script src="https://thg303.github.io/jalaali-datepicker-demo/dist/prerequisities.min.js"></script>
        <script src="https://thg303.github.io/jalaali-datepicker-demo/dist/ng-jalaali-flat-datepicker.min.js"></script>

        <script src="app.js"></script>
<script>(function() {

    'use strict';

    /**
     * Test code for ng-datepicker demo
     */
    angular
        .module('testApp', ['ngJalaaliFlatDatepicker'])
        .controller('mainController', ['$scope', mainController]);

    function mainController ($scope) {

        $scope.datepickerConfig = {
            allowFuture: false,
            dateFormat: 'jYYYY/jMM/jDD',
            gregorianDateFormat: 'YYYY/DD/MM',
            minDate: moment.utc('2008', 'YYYY')
        };
		$scope.date ="1395/04/08";
    }

})();
</script>
    </body>
</html>

1 个答案:

答案 0 :(得分:0)

这是ngInit的可接受用途之一。您可以使用ngInit从服务器端注入值。此示例使用PHP,但应适用于任何服务器端语言:

<div ng-controller="mainController" ng-init="gdate = <?php echo $gdate; ?>">
  <!-- ... -->
</div>

请注意,在实例化控制器后评估ng-init,因此如果要在控制器中使用该变量,则需要循环摘要(可以使用$ timeout完成):

// mainController
$timeout(function() {
  console.log(gdate);
}

//or

$scope.apply(function() {
  console.log(gdate);
});