Question

将伊斯兰日期作为日期选择器绑定到文本框，但是当写入ng内部时重复它不起作用

我的代码

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <script src="Scripts/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.js"></script>
    <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.plus.min.js"></script>
    <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.plugin.min.js"></script>
    <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.picker.js"></script>
    <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.islamic.min.js"></script>
    <link href="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/css/jquery.calendars.picker.css" rel="stylesheet" />
</head>
<body>
    <div ng-app="myApp" ng-controller="AppCtrl">
        <table>
            <tr ng-repeat="r in rvm">
                <td>
                    <input type="text" id="txtHijriDate" ng-model="r.Date" />
                </td>
            </tr>
        </table>
    </div>
</body>

</html>
<script>
    var myApp = angular.module('myApp', []);
    myApp.controller('AppCtrl', function ($scope) {
        $scope.rvm = [];
        $('#txtHijriDate').calendarsPicker({
            calendar: $.calendars.instance('islamic'),
        });
    });
</script>

如果我在rvm＆＃34;中删除`ng-repeat =＆＃34; r它正在工作，但我想要重复日期选择器

Answer 1

您的代码在ID为txtHijriDate的元素上放置1（且仅1）日历使用ng-repeat时，可以使用相同的ID创建多个元素你需要添加

 $('#txtHijriDate').calendarsPicker({
            calendar: $.calendars.instance('islamic'),
        });

在每次创建元素的JavaScript中编码。我建议将“id”映射到依赖于你的元素的ID。

Answer 2

错误：日历绑定代码在控件（输入框）加载到ng-repeat中之前执行。

解决方案：使用ng-bind指令绑定控件上的日历。

请参阅下面的工作演示：

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.js"></script>
    <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.plus.min.js"></script>
    <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.plugin.min.js"></script>
    <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.picker.js"></script>
    <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.islamic.min.js"></script>
    <link href="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/css/jquery.calendars.picker.css" rel="stylesheet" />
</head>
<body>

    <div ng-app="myApp" ng-controller="AppCtrl">
        <table>
            <tr ng-repeat="i in [1, 2,3,4,5] track by $index">
            
                <td>
                   <input type="text" ng-                                                   
                 ng-bind="bindDate('calendar-control'+$index)"                                 id="calendar-control{{$index}}"  
                  model="rvm[1].Date" /> 
                  
                </td>
            </tr>
        </table>
    </div>
</body>

</html>
<script>
    var myApp = angular.module('myApp', []);
    myApp.controller('AppCtrl', function ($scope) {
        $scope.rvm = [];       
            
        
        $scope.bindDate=function(id){           
        $('#'+id).calendarsPicker({
            calendar: $.calendars.instance('islamic'),
        });  
        }
    });
</script>

日期选择器不在AngularJS中的ng重复内部

2 个答案: