AngularJS Binding：Dropdown绑定字符串,需要编号

发布时间：2020-12-17 17:45:20 所属栏目：安全来源：网络整理

导读：我有一个下拉列表,允许用户选择一个数字. body ng-app="myApp" div ng-controller="MyCtrl" select ng-model="selectedNum" ng-change="numberSelected()" option value="10"10/option option value="20"20/option option value="30"30/option option value=

我有一个下拉列表,允许用户选择一个数字.

<body ng-app="myApp">
    <div ng-controller="MyCtrl">
        <select ng-model="selectedNum" ng-change="numberSelected()">
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option value="40">40</option>
            <option value="50">50</option>
        </select>
    </div>
</body>

回到我的控制器中,我可以通过$scope.selectedNumber引用所选的值

angular.module('myApp',[]).controller('MyCtrl',function($scope) {

    $scope.selectedNum = 10;

    $scope.numberSelected = function(){
        alert(typeof $scope.selectedNum); //alerts string,need this to be a number
    }
});

Working Fiddle

我是角色的新手 – 来自jQuery我习惯于显式调用Number($(‘#mySelect’).val())但是在角度中,值会自动绑定到$scope.

我的问题：有没有办法强制$scope.selectedNum为类型号？在我的实际项目中,我使用selectedNum进行一些计算.我想我可以在各个地方使用Number(..)或parseInt(..),但我认为这可能会有点重复和混乱.

解决方法

问题是te选项值是HTML中的CDATA – 因此它是代码中的字符串.如果您使用数字数组和ng-options指令,您可以解决您的问题：

在您的控制器中,您可以添加：

$scope.nums = [10,20,30,40,50];

在你看来：

<select 
      ng-model="selectedNum" 
      ng-change="numberSelected()" 
      ng-options="n for n in nums">
</select>

现在你的控制器功能中会有一个数字：

$scope.numberSelected = function(){
   console.log(typeof $scope.selectedNum,$scope.selectedNum);
}

这是一个工作小提琴：http://jsfiddle.net/5aHRL/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!