Ang-model值中的AngularJS日期未传递给控制器 [英] AngularJS date in ng-model value not pass to controller
问题描述
当我点击CheckAvailability按钮时，日期值未传递给控制器
when i click CheckAvailability button date value doesnot pass to controller
<div class='input-group date'>
<input ng-model="BookedFromDate" type="text" value=@DateTime.Now.ToString("dd/MM/yyyy") class="form-control BookedFDate" style="border-width: 0 0 2px 0;">
<span class="input-group-addon">
<i class="font-icon font-icon-calend"></i>
</span>
</div>
Anguler：
$scope.CheckAvailability = function () {
alert("Hello, " + $scope.BookedFromDate);
};
推荐答案
忘记ASP。在AngularJS中，输入不需要值。只需填充 ng-model 即可。您可以在控制器中执行此操作，也可以使用HTML中的 ng-init 执行此操作。要屏蔽/过滤日期，请使用 $ filter 服务。它通常不直接使用，所以我建议在 ng-init 中应用过滤器。为此，AngularJS有一个 date 过滤器。
Forget ASP. In AngularJS input doesn't need a value. Simply populate the ng-model. You can do it in controller or with ng-init in HTML. To mask/filter the date, use $filter service. It's usually not used directly, so I suggest applying a filter in ng-init. AngularJS has a date filter for this purpose.
以下是一个例子：
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.now = new Date();
$scope.CheckAvailability = function() {
console.log("Date:", $scope.BookedFromDate);
};
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class='input-group date'>
<input ng-model="BookedFromDate"
type="text"
ng-init="BookedFromDate = (now | date : 'dd/MM/yyyy')"
class="form-control BookedFDate"
style="border-width: 0 0 2px 0;">
<span class="input-group-addon">
<i class="font-icon font-icon-calend"></i>
</span>
<button ng-click="CheckAvailability()">Click</button>
</div>
</div>
</body>
</html>
或者将类型从 text 更改为 date 以完全忽略过滤器和屏蔽。
Alternatively change the type from text to date to completely ignore the filter and masking.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.BookedFromDate = new Date();
$scope.CheckAvailability = function() {
console.log("Date:", $scope.BookedFromDate);
};
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class='input-group date'>
<input ng-model="BookedFromDate"
type="date"
class="form-control BookedFDate"
style="border-width: 0 0 2px 0;">
<span class="input-group-addon">
<i class="font-icon font-icon-calend"></i>
</span>
<button ng-click="CheckAvailability()">Click</button>
</div>
</div>
</body>
</html>
这篇关于Ang-model值中的AngularJS日期未传递给控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
