使用角度js从数据选择器获取数据

时间:2014-11-17 12:19:37

标签: javascript jquery html angularjs

我下载了包含html,css和java脚本的日期选择器代码。它运作良好。但我想使用角度js从日期选择器打印或获取所选日期。我写了一个代码,但它打印未定义。我不知道我哪里错了。这是我的代码。

  <!DOCTYPE html>
  <html ng-app>
  <head>
     <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css" />
     <link rel="stylesheet" type="text/css" href="assets/css/todc-bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="assets/css/todc-datepicker.css" />

 <script type="text/javascript"      
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script type="text/javascript" src="assets/js/bootstrap-datepicker.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
 <script src="assets/js/angular.js"></script>

  <style type="text/css">
     html,body { margin: 20px; }
  </style>
 </head>
 <body>
    <form class="form-horizontal" ng-controller="MyController">
       <div class="control-group">
          <label class="control-label" for="dt1">Select Date</label>
            <div class="controls">
              <div class="input-append">
                 <input class="span2" id="dt1" type="text" ng-model="selectedDate" />
                    <button class="btn" type="button" id="cal1"><i class="icon-calendar"></i></button>
                </div> 
                    <input class="btn" type="button" value="submit" ng-click="add()"> 

   </form>
</body>


  <script type="text/javascript">
      $(function() {
         $('#cal1').datepicker({ 
           autoclose: true, 
           todayHighlight: true, 
           targetInput: $("#dt1") 
    });
 });
      function MyController($scope) {

        $scope.add = function() {
        alert($scope.selectedDate);
       }
  }
</script>

</html>

1 个答案:

答案 0 :(得分:0)

在您的控制器中,您将公开一个功能来发出警报或任何您想要的内容:

  angular.module('ng-app')
  .controller('MyController', ['$scope', function ($scope) {
    $scope.showInfo = function (text) { alert(text); }
  }]);

您将在html中使用ng-bind,使用其他输入中ng-model的范围值

  <input class="span2" id="dt1" type="text" ng-model="selectedDate" />
  <input class="btn" type="button" value="submit" ng-click="showInfo(selectedDate)">