Question

我无法使用角度js来完成一段代码。实际上我正在尝试使用AngularJS填写表单并传递数据。我可以获取除日期输入文本字段之外的所有数据，日期输入文本字段通过单击按钮填充并显示在文本字段上。
这是我的代码：

    <div ng-controller="EmployeeController">
    <form name="frmEmp" novalidate>
    Employee Name: 
    <input type="text" class="form-control input-sm" name="EName" id="EName" ng-model="emp.EName" required />
    Salary:
    <input type="number" class="form-control input-sm" name="Salary" id="Salary" ng-model="emp.Salary" required />
    Date of Birth: 
    <div class="input-group">
       <span class="input-group-btn">
          <button class="btn btn-default btn-sm calendar-icon" type="button"><span class="glyphicon glyphicon-calendar"></span></button>
       </span>
       <input type="text" class="form-control input-sm datepickr" name="Dob" ng-model="emp.Dob" id="calendar-input" style="width: 120px;">
    </div>
    <input type="text" class="form-control input-sm datepickr" name="Dob" ng-model="emp.Dob" id="calendar-input" style="width: 120px;">
   <input type="button" id="btnSubmit" name="btnSubmit" class="btn btn-success btn-sm" value="Looks Good" ng-click="Save(emp)" />
    </form>
    </div>

我的控制器如下所示：

myApp.controller('EmployeeController', ['$scope',function ($scope) {
$scope.Save = function (emp) {
    alert("In employee\'s Save function\n" + emp);
    $scope.emp = {
        EName: emp.EName,
        Salary: emp.Salary,
        Dob: emp.Dob
    };

    alert("Ename: " + $scope.emp.EName);
    console.log("Ename: " + $scope.emp.EName);

    alert("Salary: " + $scope.emp.Salary);
    console.log("Salary: " + $scope.emp.Salary);

    alert("Dob: " + $scope.emp.Dob);
    console.log("Dob: " + $scope.emp.Dob);
};
}

我担心的是我能够获取Ename和Salary。但是Dob返回'undefined'。

对于datepicker，我使用以下脚本。

<script type="text/javascript">        
    datepickr('.calendar-icon', { altInput: document.getElementById('calendar-input'), dateFormat: 'd-m-Y' });                
</script>

还有一个事实。我熟悉JQuery并试图将我的应用程序纯粹放在AngularJS上。

非常感谢这方面的任何帮助。

抱歉我的英语不好。： - ）

这是插入代码：
PlunKr

Answer 1

Here是你工作的一个有用的工具。

解决方案是使用bootstrap-tpls进行角度集成，然后您可以访问datepicker指令。

我刚刚添加：

，而不是您的输入

我还对您的控制器进行了一些改进（删除了保存功能参数，控制器创建时的emp对象初始化）和保存按钮（表单验证，ng-form指令的使用）。所以最终解决方案看起来像这样：

HTML：

<head>
  <meta charset="utf-8" />
  <title>AngularJS demo</title>
  <link data-require="bootstrap-css" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

  <script data-require="jquery" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20">    </script>
  <script src="angular-ui-bootstrap.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="EmployeeController">
  <div ng-form="frmEmp">
    Employee Name:
    <input type="text" class="form-control input-sm" name="EName" id="EName" ng-model="emp.EName" ng-required="true" /> Salary:
    <input type="number" class="form-control input-sm" name="Salary" id="Salary" ng-model="emp.Salary" ng-required="true" /> Date of Birth:
    <input type="text" class="form-control" uib-datepicker-popup="dd-MMMM-yyyy" ng-model="emp.Dob" is-open="opened" ng-required="true" close-text="Close" />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="opened = true">    <i class="glyphicon glyphicon-calendar"></i></button>
    </span>
    <input type="button" id="btnSubmit" name="btnSubmit" class="btn btn-success btn-sm" value="Looks Good" ng-click="Save()" ng-disabled="frmEmp.$invalid" />
  </div>
</body>

控制器：

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('EmployeeController', ['$scope', function($scope) {
  $scope.emp = {};

  $scope.Save = function() {
    //alert("In employee\'s Save function\n" + $scope.emp);

    alert("Ename: " + $scope.emp.EName);
    console.log("Ename: " + $scope.emp.EName);

    alert("Salary: " + $scope.emp.Salary);
    console.log("Salary: " + $scope.emp.Salary);

    alert("Dob: " + $scope.emp.Dob);
    console.log("Dob: " + $scope.emp.Dob);
  };
}])

请确保包含css。

无法使用angular获取值

1 个答案: