AngularJS如何将下拉菜单选中的数字值存储为整数类型

核心原因 #

原生HTML的<option>标签value属性存储的值默认会被解析为字符串类型，现有代码选中选项后，绑定的visitors_list拿到的是"1"、"2"这类字符串值，而非目标整数类型数字。

推荐方案（零额外转换逻辑） #

直接用AngularJS内置的ng-value指令替换原生value属性，ng-value支持直接绑定数字类型字面量，选中后会自动将整数赋值给绑定变量，不需要额外编写类型转换代码。
修改后可直接使用的代码如下：

<div class="container-fluid">
    <label>Choose number</label>
    <select ng-model="visitors_list" id="visitors">
        <option class="dropdown-item" ng-value="1">1</option>
        <option class="dropdown-item" ng-value="2">2</option>
        <option class="dropdown-item" ng-value="3">3</option>
        <option class="dropdown-item" ng-value="4">4</option>
        <option class="dropdown-item" ng-value="5">5</option>
    </select>
</div>

实现效果：选中选项2时，visitors_list变量直接存储整数类型的2，完全匹配需求。

兼容方案（无需修改原有value配置） #

如果不想改动现有option的value属性，可以通过ng-change事件在用户选中时手动做类型转换：

• 第一步：给select标签增加ng-change事件绑定

<select ng-model="visitors_list" id="visitors" ng-change="parseSelectValue()">

• 第二步：在对应Angular控制器中添加类型转换逻辑

$scope.parseSelectValue = function() {
    // 第二个参数10指定按十进制解析，避免特殊值的解析异常
    $scope.visitors_list = parseInt($scope.visitors_list, 10);
}

注意：不要尝试直接给原生value属性写不带引号的数字，HTML规范会自动将所有原生属性值转为字符串，无法实现整数绑定效果。

内容的提问来源于stack exchange，提问作者user19384320