3 回答

TA貢獻1859條經驗 獲得超6個贊
tosh的答案很好地成為了問題的核心。這是一些其他信息。
篩選器和格式化程序
ng-bind并且ng-model都有其輸出給用戶之前,把數據的概念。為此,請ng-bind使用過濾器,而要ng-model使用格式化程序。
過濾器(ng-bind)
使用ng-bind,您可以使用過濾器來轉換數據。例如,
<div ng-bind="mystring | uppercase"></div>,
或更簡單地說:
<div>{{mystring | uppercase}}</div>
請注意,這uppercase是一個內置的角度濾鏡,盡管您也可以構建自己的濾鏡。
格式化程序(ng-model)
要創建ng-model格式化程序,請創建一個require: 'ngModel'do指令,該指令允許該指令訪問ngModel的controller。例如:
app.directive('myModelFormatter', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, controller) {
controller.$formatters.push(function(value) {
return value.toUpperCase();
});
}
}
}
然后在您的部分:
<input ngModel="mystring" my-model-formatter />
這本質上是ng-model什么樣的等效uppercase 過濾器在做ng-bind上面的例子。
解析器
現在,如果您打算允許用戶更改值,該mystring怎么辦?ng-bind從模型 -> 視圖只有一種方式綁定。但是,ng-model可以從視圖 -> 模型進行綁定,這意味著您可以允許用戶更改模型的數據,并且使用解析器可以以簡化的方式格式化用戶的數據??雌饋硐襁@樣:
app.directive('myModelFormatter', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, controller) {
controller.$parsers.push(function(value) {
return value.toLowerCase();
});
}
}
}
播放ng-model格式化程序/解析器示例的實時調試器
還有什么?
ng-model還具有內置驗證。只需修改您的$parsers或$formatters函數即可調用ngModel的controller.$setValidity(validationErrorKey, isValid)函數。
Angular 1.3有一個新的$ validators數組,您可以使用它代替$parsersor進行驗證$formatters。
Angular 1.3還具有對ngModel的getter / setter支持
- 3 回答
- 0 關注
- 934 瀏覽
添加回答
舉報