AngularJS检索数据并显示ng-change

时间:2015-10-13 12:08:07

标签: javascript angularjs

我有一个向数据库添加记录的功能。 我需要做的是当我选择一个选项时,所有必填字段都必须填充数据。

我是angularjs的新手,想学习如何做到这一点。

下面是我的代码。

模板

 <div class="col-md-10">
      <div class="col-md-12">
        <div class="form-group">
            <label>Select Employee </label>
            <select class="form-control" ng-change='getData()'  id='empId' ng-model="empId"  ng-options="opt.id as opt.value for opt in employees">
            </select>
        </div>
      </div> 

      <div class="col-md-6">
        <div class="form-group">
          <label>Department <i class="required">*</i></label>
          <select class="form-control" ng-change ="getPos()" ng-model="data.Employee.departmentId" ng-options="opt.id as opt.value for opt in deparments"  data-validation-engine="validate[required]">
          </select>  
        </div>
      </div> 

      <div class="col-md-6">
        <div class="form-group">
          <label>Position <i class="required">*</i></label>
           <select class="form-control"  ng-model="data.Employee.positionId" data-validation-engine="validate[required]">
           </select>
        </div>
      </div> 

      <div class="col-md-6">
        <div class="form-group">
          <label>Rate <i class="required">*</i></label>
          <input type="text" class="form-control" ng-model="data.Employee.rate" data-validation-engine="validate[required]">
        </div>
      </div> 

      <div class="col-md-6">
        <div class="form-group">
          <label>Loan Amount <i class="required">*</i></label>
          <input type="text" class="form-control" ng-model="data.Loan.amount" data-validation-engine="validate[required]">
        </div>
      </div> 

      <div class="col-md-6">
        <div class="form-group">
          <label>Period (months) <i class="required">*</i></label>
          <input type='text' class="form-control" ng-model="data.Loan.amount" data-validation-engine="validate[required]">
        </div>
      </div> 

        <div class="col-md-6">
          <div class="form-group">
            <label>Date Start<i class="required">*</i></label>
            <input type="text" class="form-control text-left" id="dateStart" ng-model="data.Employee.contractFrom" data-validation-engine="validate[required]" id="contractFrom">
          </div>
        </div>
    </div>

控制器

 app.controller('LoanAddController', function($scope, Loan,Select) {
 $('#form').validationEngine('attach');

 $scope.load = function() {
  Loan.get({ id: $scope.employeeId }, function(e) {
  $scope.data = e.data;
 });

 Select.get({ code: 'departments' }, function(e) {
 $scope.departments = e.data;
 });

// employees selection
 Select.get({ code: 'employees' }, function(e) {
 $scope.employees = e.data;
 });

  Select.get({ code: 'positions' }, function(e) {
  $scope.positions = e.data;
  });
 }


 $('#dateStart').datepicker({
   format: 'mm/dd/yyyy',
   autoclose: true
 });

 $scope.load();
 // save loan data
 $scope.save = function() {
  valid = $("#form").validationEngine('validate');

   if (valid) {
      Loan.save($scope.data, function(e) {
        if (e.ok) {
         $.gritter.add({
         title: 'Successful!',
         text:  e.msg,
      });
      window.location = '#/loans';
    } else {
      $.gritter.add({
        title: 'Warning!',
        text:  e.msg,
      });
     }
    });
   }
  }
 });

一些JSON数据

{
 "ok": true,
 "data": [
    {
        "Loan": {
            "id": "1",
            "employeeId": "9",
            "dateApplied": "2015-10-15",
            "amount": "5000",
            "period": "6",
            "startdate": "2015-11-01",
            "status": "pending",
            "visible": true,
            "created": "0000-00-00 00:00:00",
            "modified": "0000-00-00 00:00:00"
        },
        "Employee": {
            "id": "9",
            "employeeNumber": "24681012",
            "lastName": "Cortez",
            "firstName": "Kim Carlo",
            "middleName": "Mira",
            "departmentId": "1",
            "positionId": "4",
            "rate": "600",
            "typeId": "8",
            "dateHired": "2015-10-22",
            "contractFrom": "2015-10-31",
            "contractTo": "2016-10-31",
            "image": "9.PNG",
            "visible": true,
            "created": "2015-10-07 08:25:56",
            "modified": "2015-10-07 08:25:56"
        },
        "Department": {
            "id": null,
            "code": null,
            "name": null,
            "description": null,
            "visible": null,
            "created": null,
            "modified": null
        },
        "Position": {
            "id": "9",
            "name": "Bell boy",
            "departmentId": "6",
            "description": "bellboy, ice cream vendor",
            "visible": true,
            "created": "2015-10-06 13:52:43",
            "modified": "2015-10-06 13:52:43"
        }
    }
  ],
   "paginator": {
    "page": 1,
    "current": 1,
    "count": 1,
    "prevPage": false,
    "nextPage": false,
    "pageCount": 1,
    "order": {
        "Loan.id": "ASC"
    },
    "limit": 25,
    "options": [

    ],
    "paramType": "named"
 }
}

我必须在字段中填写员工详细信息。 任何帮助将不胜感激。

谢谢你们,

0 个答案:

没有答案