发表新帖
发表新帖

AngularJS date in ng-model value not pass to controller

前端 未结
关注
2 775
小鲜肉
小鲜肉 2021-01-23 09:55

when i click CheckAvailability button date value doesnot pass to controller 


         

        

                      

              相关标签:
2条回答
  • 南旧
    2021-01-23 10:18

    Hope this code helps, in angular, value tag is of less use as we are binding the values 2-way.

    <body ng-app="app">
    <div ng-controller="EditCtrl">
      <input type="text" ng-model="item.title" />
      <input type="date" ng-model="item.date" />
      {{item.date}}
    </div>
  </body>
    0 讨论(0)
  • 無奈伤痛
    2021-01-23 10:32

    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.

    Here is an example:

    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>

    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>

    0 讨论(0)
 看不清?
提交回复
热议问题