更好的建立多場模型/值的角度方法？

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> 

它的工作原理，但有一個更加棱角分明的方式來做到這一點？

Answer 1

如果您使用支持ng-model-options的角度版本，那麼您可以綁定到getterSetter。您可以更上ng-model-options指令here

閱讀起來有時是很有幫助的ngModel綁定到一個getter/setter函數。 A getter/setter是一個函數，用於在使用零參數調用時返回模型 的表示形式，並在使用參數調用時設置 模型的內部狀態。對於具有與 不同的內部表示的模型，使用此 有時可能會使模型暴露給視圖。

該解決方案需要您稍微更改模型結構。

請參閱工作示例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