如何實現ng-model的功能綁定（使用plnkr）

我有一個dob列，值來自於這是yyyy-mm-dd格式說2013-01-01，我需要在輸入框中顯示爲1月1日我可以通過編寫一個函數來實現，然後從該函數返回確切的值。 但是函數無法使用ng-model從輸入框中調用，因爲它可以使用ng-bind跨度進行調用。我可以理解，在輸入框中調用函數將打破雙向綁定。但是我可以使用其他什麼方法。如何實現ng-model的功能綁定（使用plnkr）

http://plnkr.co/edit/pZDpypsxM1OA2JwFhjjp?p=preview

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
<script type="text/javascript" > 
    var app = angular.module('app', []); 
    app.controller('AppCtrl', function ($scope) { 
     $scope.dob = "2013-01-01"; 
     $scope.getDateOfBirth = function(dob){ 
      var months = ["Jan","Feb","Mar","Apr","May","June","July","Aug","Sep","Oct","Nov","Dec"] 
      var split = dob.split("-"); 
      return parseInt(split[2])+" "+months[parseInt(split[2])-1]; 
     } 
    }); 
</script> 

<span ng-app="app" ng-controller="AppCtrl" ng-bind="getDateOfBirth(dob)"></span> 

<input type="text" ng-model="getDateOfBirth(dob)"/>

來源

2013-08-22 Rohit Bansal

簽入[$ formatters and $ parsers]（https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#$parsers）。如果你願意，我可以用它們寫一個答案 – aarosil

可以使用NG-初始化分配函數返回值，並將其賦值給一個模型：

<input ng-init="myDOB = getDateOfBirth(dob);" type="text" ng-model="myDOB">

DEMO

來源

2013-08-22 15:04:15 zsong

謝謝。但是這樣做，它不會參與雙向綁定，如果我在dob中做了一些更改，它將不會反映在輸入框中 –

http://plnkr.co/edit/qntKlT7mAysnSRGWJ7ot?p=preview –

在上面的plnkr ，如果我們在第二個輸入框中進行更改，那麼它將反映在跨度中，但不是在第一個輸入框中 –

你可以使用NG-初始化設定值和NG-變化不斷更新

http://plnkr.co/edit/q1hg0R?p=preview

來源

2014-04-24 16:36:54 dsmithco

日期，電話號碼等的價值，你可以使用UI面罩。希望這可以幫助別人！

來源

2015-03-18 15:46:50 bfregon

如何實現ng-model的功能綁定（使用plnkr）

回答

相關問題