Question

我的模型，即将发送给api，想要一个dd-mm-yyyy形式的DoB。

即

    vm.Manifest = {
        Driver: {
            dateOfBirth: "17-11-1969"
        },
    };

我的观点有三个不同的字段。

我认为我可以做的是有一个隐藏的字段，可以动态连接三个字段：

<div class="form-group">
    <label class="col-sm-2 col-form-label text-right">Date of Birth:</label>
    <div class="col-md-5">
        <select ng-model="adminManifestVm.Manifest.Driver.Day"
                ng-options="day.val as day.name for day in adminManifestVm.controls.days"
                name="Day"
                class="form-control input-inline input-small"
                required>
            <option value="">Day</option>
        </select>
        <select ng-model="adminManifestVm.Manifest.Driver.Month"
                ng-options="month.val as month.name for month in adminManifestVm.controls.months"
                name="Month"
                class="form-control input-inline input-small"
                required>
            <option value="">Month</option>
        </select>
        <select ng-model="adminManifestVm.Manifest.Driver.Year"
                ng-options="year for year in adminManifestVm.controls.yearsAge"
                name="Year"
                class="form-control input-inline input-small"
                required>
            <option value="">Year</option>
        </select>


<!-- this field is hidden but contains the formatted date -->

        <input type="text" name="dateOfBirth" 
           ng-value="adminManifestVm.Manifest.Driver.Day +
                     '-' +
                     adminManifestVm.Manifest.Driver.Month +
                     '-' +
                     adminManifestVm.Manifest.Driver.Year">

        <div class="error-message" ng-show="manifestForm.$invalid && (manifestForm.Day.$touched &&  manifestForm.Month.$touched &&  manifestForm.Year.$touched) || adminManifestVm.submitted">
            <span ng-show="manifestForm.$error.required">Your full birth date is required.</span>
        </div>
    </div>
</div>

它有效，但有更多Angular方法吗？

Answer 1

如果您使用支持ng-model-options的角度版本，则可以绑定到getterSetter。您可以在ng-model-options指令here

上阅读更多内容

有时将ngModel绑定到getter / setter函数会很有帮助。一个 getter / setter是一个返回模型表示的函数当使用零参数调用时，并设置a的内部状态用参数调用时的模型。使用它有时很有用对于具有不同于的内部表示的模型模型暴露给视图的内容。

此解决方案要求您稍微更改模型结构。

请参阅工作示例here

HTML：

<div class="container">
  <div class="row">
    <div class="col-sm-12" data-ng-controller="TestController as vm">
      <form>
        <div class="form-group">
          <label>DOB</label>
          <label>{{driver.dateOfBirth.date()}}</label>
        </div>
        <div class="form-inline">
          <select class="form-control" style="width:120px" ng-options="day for day in days" ng-model="driver.dateOfBirth.day" ng-model-options="{ getterSetter: true }"></select>
          -
          <select class="form-control" style="width:120px" ng-options="month for month in months" ng-model="driver.dateOfBirth.month" ng-model-options="{ getterSetter: true }"></select>
          -
          <select class="form-control" style="width:120px" ng-options="year for year in years" ng-model="driver.dateOfBirth.year" ng-model-options="{ getterSetter: true }"></select>
        </div>
      </form>
    </div>
  </div>
</div>

JS：

var myApp = angular.module('myApp', []);
myApp.controller('TestController', ['$scope', function($scope) {
  $scope.days = [];
  $scope.months = [];
  $scope.years = [];

  for (var i = 1; i <= 31; i++) {
    $scope.days.push(i);
  }

  for (var i = 1; i <= 12; i++) {
    $scope.months.push(i);
  }

  for (var i = 1990; i <= 2016; i++) {
    $scope.years.push(i);
  }

  $scope.driver = {
    dateOfBirth: {
      day: function(day) {
        return arguments.length ? (this.day = day) : this.day;
      },
      month: function(month) {
        return arguments.length ? (this.month = month) : this.month;
      },
      year: function(year) {
        return arguments.length ? (this.year = year) : this.year;
      },
      date: function() {
        if (!isFunction(this.day) && !isFunction(this.month) && !isFunction(this.year)) {
          return this.day + '-' + this.month + '-' + this.year;
        } else {
          return '';
        }
      }
    }
  };

  function isFunction(obj) {
    return typeof obj === "function"
  }
}]);

然后，您只需将$scope.driver.dateOfBirth.date()发送到API

即可

构建多场模型/值的更好的Angular方法？

1 个答案: