0
我是角度Js中的新手，並且無法在下拉列表中設置默認值並嘗試在輸入框中嘗試當前日期值，但是經過多次處理後，沒有得到一些結果。任何人都可以檢查這個plunker代碼來整理程序。如何在Angular Js中的輸入框中設置日期的默認值
<!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="bootstrap-datetimepicker.min.js">
//http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript" src="bootstrap-datetimepicker.pt-BR.js">
//http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
<script data-require="[email protected]" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
</head>
<body><div ng-app="plunker" ng-controller="MainCtrl" ng-init="selected_id1=selected_id2 = var1 = var2 '';">
<div ng-repeat='selecting in selects' ng-init="selected_id1=selected_id2='';var1=var2='';test=''"> Start Date
<select
ng-model="selecting.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="selecting.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>
<div class="container container-fluid" ng-controller="MainCtrl">
<form class="form-horizontal" novalidate name="form" ng-submit="submit()">
<div class="well">
<div id="date" class="input-append" datetimez ng-model="selecting.var1">
<input data-format="MM/dd/yyyy " type="text" id="input1" name="input1" min="2013-01-01" max="2013-12-31" required /></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="selecting.var2">
<input data-format="MM/dd/yyyy " type="text" id="input1" name="input1" min="2013-01-01" max="2013-12-31" required /></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</div>
</form>
<!-- Date Result: <input type="text" value="{{((selecting.var2 - selecting.var1)/3600/1000/24) | number:0;}}" ng-model="test"><p>{{ test}}</p>
--> </div>
<button type='button' ng-click='remove(selecting)'>Remove</button>
</div>
<div>
<button type='button' ng-click='add()'>Add</button>
<p>Time Difference:{{test() | number:0}}</p>
<p>Date Difference:{{dateResult() | number:0}}</p>
</div>
<script>
var app = angular.module("plunker",[]);
app.controller("MainCtrl",['$scope',function($scope){
$scope.options = [
{id:1, name:'01:00 AM'},
{id:2, name:'02:00 AM'},
{id:3, name:'03:00 AM'},
{id:4, name:'04:00 PM'},
{id:5, name:'05:00 AM'},
{id:6, name:'06:00 AM'},
{id:7, name:'07:00 AM'},
{id:8, name:'08:00 AM'},
{id:9, name:'09:00 PM'},
{id:10, name:'10:00 AM'},
{id:11, name:'11:00 AM'},
{id:12, name:'12:00 PM'},
{id:13, name:'01:00 PM'},
{id:14, name:'02:00 PM'},
{id:15, name:'03:00 PM'},
{id:16, name:'04:00 PM'},
{id:17, name:'05:00 PM'},
{id:18, name:'06:00 PM'},
{id:19, name:'07:00 PM'},
{id:20, name:'08:00 PM'},
{id:21, name:'09:00 PM'},
{id:22, name:'10:00 PM'},
{id:23, name:'11:00 PM'},
{id:24, name:'00:00 --'}]
$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;
if((a!="") && (b!=""))
{
result +=(parseInt(b)-parseInt(a));
}
if(result < 0)
{
result = 24+result;
}
else
{
result = result;
}
alert("time result is"+result);
});
return result;
}
// function to calculate total Date ..........................................................
$scope.dateResult = function()
{
var dateResult =0,firstdate=0,seconddate=0,result=0,id2,a,b,extradays=0;
angular.forEach($scope.selects, function(value, key)
{
firstdate = value.var1;
seconddate = value.var2;
a = value.selected_id1;
b = value.selected_id2;
dateResult +=((seconddate-firstdate)/3600/1000/24);
if((a!="") && (b!=""))
{
result +=(parseInt(b)-parseInt(a));
}
if(result<0)
{
result = 24+result;
dateResult = dateResult-1;
}
alert("date result is"+dateResult);
});
return dateResult;
}
$scope.selects = [{}]; // default 1 sets
// functions to ADD/Remove --------------------------------------------------------------------------------
$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);
}
});
}
// functions to ADD/Remove --------------------------------------------------------------------------------
}]);
app.directive('datetimez', function() {
return {
restrict: 'A',
require : 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
element.datetimepicker({
dateFormat:'dd/MM/yyyy',
language: 'pt-BR'
}).on('changeDate', function(e) {
ngModelCtrl.$setViewValue(e.date);
scope.$apply();
});
}
};
});
</script>
</body>
</html>
http://plnkr.co/edit/inkEeWIe2wDUIFkFBVoy?p=preview
可能重複http://stackoverflow.com/questions/22601717/angularjs-怎麼辦-I-預選擇最值的-A-下拉 - 當 - 的 - 值是 - 檢索） – callmekatootie
先生，我需要默認值輸入日期框也 – Nitish