Angularjs指令與ngModel

我有一個javascript函數，我們在遺留系統中使用，在您輸入時改變輸入字段的格式;Angularjs指令與ngModel

function checkValidDate(dateStr) { 
    if (dateStr && dateStr != '') { 
     dateStr = dateStr.replace('/', ''); 
     dateStr = dateStr.replace('/', ''); 
     var d_f_m = dateStr; 
     var d_f_d = dateStr; 
     var d_f_y = dateStr; 
     var err_msg = ''; 
     var d_s_day = d_f_d.slice(0, 2); 
     d_s_day = d_s_day + "/"; 
     var d_s_month = d_f_m.slice(2, 4); 
     d_s_month = d_s_month + "/"; 
     var d_s_year = d_f_y.slice(4, 8); 
     //Now we check the year to see if it is only 2 digis, if is, add 2 more 
     if (d_s_year.length == 2) { 
      d_s_year = '19' + d_s_year; 
     } 
     return d_s_day + d_s_month + d_s_year; 
    } else { 
     return null; 
    } 
}

我一直想給這個函數轉換爲使用ngModel的angularjs指令，但我似乎無法梳理出來。誰會知道如何將其轉換爲角度指令？

非常感謝！

來源

2014-05-21 Ben Kilah

你所期望的指令發生什麼，如果日期是無效的？ – Dalorzo

在這一點上只是留下他們鍵入的任何東西。 –

如果工作呢？如果是2個字符，則只能在年份中添加2個數字。 – Dalorzo

不確定您是否希望在您鍵入字段時或離開字段後驗證它。要麼可以工作，儘管在離開現場之後實施了以下驗證（失去焦點）。

雖然現有的算法看起來像只處理非常特殊的情況（即2位數日，2位數月份，2至4位數年份），並且可以改進，但仍使用現有算法。目前，它是按原樣複製的。的jsfiddle在這裏http://jsfiddle.net/pSh4R/18/

HTML：

<div ng-app='app'> 
    Please enter a date 
    <br/> 
    <input type='text' dateformat ng-model='myDate'></input> 
    (Hit TAB when done) 
    <hr/> 
    Model Value : {{myDate}} 
</div>

指令宣言：

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

app.directive('dateformat', function(){ 
    return { 
     restrict : 'A', 
     scope : { 
      dateStr : '=ngModel' 
     }, 
     link : function(scope, element){ 

      element.bind('focusout', function(){     
       scope.$apply(function(){ 
        scope.dateStr = checkValidDate(scope.dateStr); 
       }); 
      }); 

      function checkValidDate(dateStr) { 
       if (dateStr && dateStr != '') { 
        dateStr = dateStr.replace('/', ''); 
        dateStr = dateStr.replace('/', ''); 
        var d_f_m = dateStr; 
        var d_f_d = dateStr; 
        var d_f_y = dateStr; 
        var err_msg = ''; 
        var d_s_day = d_f_d.slice(0, 2); 
        d_s_day = d_s_day + "/"; 
        var d_s_month = d_f_m.slice(2, 4); 
        d_s_month = d_s_month + "/"; 
        var d_s_year = d_f_y.slice(4, 8); 
        //Now we check the year to see if it is only 2 digis, if is, add 2 more 
        if (d_s_year.length == 2) { 
         d_s_year = '19' + d_s_year; 
        } 
        return d_s_day + d_s_month + d_s_year; 
       } else { 
        return null; 
       } 
      } 
     } 
    }; 
})

來源

2014-05-22 15:05:54 rchawdry

有十億種方法可以做你想做的事。這裏是一個快速解決方案，我扔在一起，讓您開始：

JS：

var app = angular.module('myApp', []); 

app.directive('dateValidator', function() { 
    return function(scope, element, attrs) { 
    // Watch for changes to the date model 
    scope.$watch('date', function(newVal, oldVal) {  
     if (!angular.equals(newVal, oldVal)) { 
     var formattedDate = checkValidDate(newVal); 
     if (formattedDate) { 
      element.text(formattedDate); 
     } 
     } 
    }); 
    }); 
});

HTML：

<input type="text" date-validator date="myDate" ng-model="myDate" />

來源

2014-05-21 03:30:16 Terry

嘿特里，感謝您的回覆！ - 我認爲你可能錯過了該功能的重點，如果需要，它會重新格式化添加「/」和2位額外數字的日期，因此它需要訪問ngModel。 –

實際上並沒有改變指令是如何工作的，這似乎是你所要求的，但我稍微更新了它，以便更合適。 – Terry

那不會更新模型嗎？ –

我建議你寫一個自定義的角度驗證。有一些很好的文章。這是一個我喜歡的：

Form Validation with AngularJS

形式及其包含的字段有特殊的屬性附加到他們，你可以利用綁定表達式和客戶端驗證：

$質樸，$髒，$ valid，$ error

來源

2014-05-21 04:38:08 SomeoneHelpful

Angularjs指令與ngModel

回答

相關問題