下拉选择与angular js中的日历冲突的值
dropdown select value conflict with calender in angular js
我正在使用两个下拉列表,同时我们需要两个日历在它。谁能告诉我为什么我的日历不显示??当我使用下拉列表代码时,我的日历停止工作。我需要的输出是这样的:-(1) 2天5小时(2) 5天4小时(3) 8天13小时下面是我的代码:
<!DOCTYPE html>
<html>
<head>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script data-require="angular.js@*" data-semver="1.4.0-beta.3" src="https://code.angularjs.org/1.4.0-beta.3/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
<script src="app.js"></script>
</head>
<body><div ng-app="app" ng-controller="ctrl" ng-init="firstTime=endTime=a=selected_id1=selected_id2=input.param1=input.param2=''">
<div ng-repeat='select in selects' ng-init="firstTime=endTime=a=selected_id1=selected_id2=select.param1=select.param2=''"> Start Date
<div id="date" class="input-append" datetimez ng-model="input.var1" >
<input data-format="MM-dd-yyyy" type="text" id="input1" name="input1" ></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<div id="date" class="input-append" datetimez ng-model="input.var2">
<input data-format="MM-dd-yyyy" type="text" id="input1" name="input1" ></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<select
ng-model="select.selected_id1"
ng-options="o.id as o.name for o in options"
ng-change="selected_name1=(options|filter:{id:selected_id1})[0].name">
</select>
<select
ng-model="select.selected_id2"
ng-options="o.id as o.name for o in options"
ng-change="selected_name2=(options|filter:{id:selected_id2})[0].name">
</select>
<button type='button' ng-click='remove(select)'>Remove</button>
</div>
<div>
<button type='button' ng-click='add()'>Add</button>
<p>Time Difference:{{test()}}</p>
</div>
<script>
angular.module("app",[])
.controller("ctrl",['$scope',function($scope){
$scope.options = [
{id:9, name:'09:00 AM'},
{id:10, name:'10:00 AM'},
{id:11, name:'11:00 AM'},
{id:12, name:'12:00 PM'},
{id:13, name:'13:00 AM'},
{id:14, name:'14:00 AM'},
{id:15, name:'15:00 AM'},
{id:16, name:'16:00 AM'},
{id:17, name:'17:00 PM'},
{id:18, name:'18:00 AM'}]
$scope.test = function()
{
var result=0,id2,a,b;
angular.forEach($scope.selects, function(value) { // loop over array to process all items
a = value.selected_id1;
b = value.selected_id2;
//alert(a);
//alert(b);
if((a!="") && (b!=""))
{
result +=(parseInt(b)-parseInt(a));
//alert("result is:" + result);
}
});
return result;
}
$scope.selects = [{}]; // default 1 sets
$scope.add = function() {
$scope.selects.push({});
}
$scope.remove = function(item) {
angular.forEach($scope.selects, function(value, key) {
if (value == item) {
$scope.selects.splice(key, 1);
}
});
}
}]);
app.directive('datetimez', function() {
return {
restrict: 'A',
require : 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
element.datetimepicker({
dateFormat:'dd-MM-yyyy',
language: 'en',
pickTime: false,
startDate: '01-11-2013', // set a minimum date
endDate: '01-11-2030' // set a maximum date
}).on('changeDate', function(e) {
ngModelCtrl.$setViewValue(e.date);
scope.$apply();
});
}
};
});
</script>
</body>
</html>
您在ng-init
中的表达式无效。试试ng-init="a=b;c=d"
之类的东西…-用;
另一个问题是ng-init中的这些值来自哪里?你真的需要ng-init吗?
if a,b,c…
相关文章:
- JavaScript打印功能使日历停止工作
- 如何在输入字段中的按钮的帮助下打开日历,该字段的类型为“=”;日期”;
- Javascript-ID冲突的几率
- primefaces日历可以禁用过去的日期和时间吗
- Google 脚本:用于创建日历活动的脚本运行时不会出错,但不会执行任何操作
- 如何在谷歌日历图表中使用布尔型列
- Json在完整日历中对数据进行了编码
- 导致内容安全策略(CSP)冲突错误的本地jquery.js文件
- 将到达日历中的2天添加到离开日历中
- 如何在下拉列表中选择完整的日历月份和年份
- 谷歌公共日历链接没有'不工作(完整日历)
- 使用AJAX将日期从SQL服务器传递到jQuery日历
- 为网站表单创建一个专业的日历
- 如何在完整日历中的当天点击时显示活动详细信息
- Pg承诺性能提升:在冲突中
- 如何使用角度材质日历
- j查询日历与mootool图像滑块冲突
- 日历和快速搜索的 Jquery 冲突问题
- jQuery与prototype.js冲突:日历图标没有弹出
- 下拉选择与angular js中的日历冲突的值