用AngularJS綁定多個HTML屬性ngModel

我是AngularJS的新手，所以請原諒我，如果這是一個noob問題。文檔非常簡潔，所以我可能錯過了一些明顯的東西！用AngularJS綁定多個HTML屬性ngModel

我正在考慮遷移一堆定製的內部代碼角度，我不得不讓角的工作與我們的REST模式，其中輸入如下所示：

foo: { 
    value: 100, 
    min: 50, 
    max: 150 
}

值成爲值顯示在input元素中，min和max（最近）綁定到min和max屬性。這些稍後由驗證功能拾取。如果數值超出最小 - 最大範圍，則將其調整回該範圍。

無論如何，我試圖做一些事情，如：

<input type="text" ng-model="foo" my-bind />

...和一個叫myBind管理的關係，所以該值讀取和寫入foo.value指令覆蓋ngModel。

然後我會使用自定義驗證程序來處理最小/最大屬性。

任何人都可以提供一個我如何實現這種綁定的例子嗎？到目前爲止，我還沒有多少運氣。

...或者我的整個方法是愚蠢的？儘管如此，我不得不使用上面的數據結構，但在不久的將來我無法改變這一點。

來源

2013-05-16 jamesinc

我不能完全肯定我理解的問題，但似乎你可以這樣做：

<input type="number" ng-model="foo.value" max="foo.max" min="foo.min" />

如果您仍需要一個自定義的指令，你會做這樣的事情來操縱ngModel：

angular.module('customControl', []). 
    directive('contenteditable', function() { 
    return { 
     restrict: 'A', // only activate on element attribute 
     require: '?ngModel', // get a hold of NgModelController 
     link: function(scope, element, attrs, ngModel) { 
     if(!ngModel) return; // do nothing if no ng-model 

     // Specify how UI should be updated 
     ngModel.$render = function() { 
      element.html(ngModel.$viewValue || ''); 
     }; 

     // Listen for change events to enable binding 
     element.bind('blur keyup change', function() { 
      scope.$apply(read); 
     }); 
     read(); // initialize 

     // Write data to the model 
     function read() { 
      ngModel.$setViewValue(element.html()); 
     } 
     } 
    }; 
    });

從AngularJS文檔。

來源

2013-05-16 00:48:38 rtcherry

我認爲最簡單的解決方案可能是最好的，但我想知道如果我來這一切都是錯誤的。有一個REST服務爲輸入元素提供了一堆數據。每個人都有我在上面提到的{value，min，max}結構。如果'value'是非數字的，通常不會指定'max'或'min'屬性。無論如何，也許我應該以不同的方式做這件事，並將其他值的最大值/最小值分開。我最終的目標是使用一個集成的驗證器（即Angular的驗證系統的一部分）來處理最大/最小邊界。 – jamesinc

用AngularJS綁定多個HTML屬性ngModel

回答

相關問題