Angular 1.x下 select 的一个巨大的坑

最新推荐文章于 2025-08-12 14:37:12 发布

转载最新推荐文章于 2025-08-12 14:37:12 发布 · 139 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/AlexNull/p/5992344.html

文章标签：

#javascript #ViewUI

本文解决了一个在Angular中使用双向绑定时出现的问题，特别是在<select>元素上绑定非字符串类型的值时遇到的难题。通过自定义指令的方式成功实现了对数值类型选项的选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

双向绑定这个特性有时让人又爱又恨

假设控制器

function($scope){

$scope.options = [{name:”alex”,id:232,…},{…},{…}…];

$scope.myModel = {name:”alex”,id:232};

}

</option>

</select>

ok,这段看起来很寻常的代码会出现问题

inspect一下

fenmgo2f9n3daro0b6

?number:45?

多次调试发现不是程序写得有问题

这个是angular中select的一个缺陷

以下是官方说法

To bind the model to a non-string value, you can use one of the following strategies:

the ngOptions directive (select)
the ngValue directive, which allows arbitrary expressions to be option values (Example)
model $parsers / $formatters to convert the string value (Example)

然而我尝试了ngOptions时依然无效

最终解决方案：

app.directive(‘convertToNumber’, function () {
return {
require: ‘ngModel’,
link: function (scope, element, attrs, ngModel) {
ngModel.$parsers.push(function (val) {
return val != null ? parseInt(val, 10) : null;
});
ngModel.$formatters.push(function (val) {
return val != null ? ” + val : null;
});
}
};
});

转载于:https://www.cnblogs.com/AlexNull/p/5992344.html