ng-select 只给出字符串，但我想要一个整数

Posted 2023-03-11

【中文标题】ng-select 只给出字符串，但我想要一个整数

【英文标题】：ng-select gives only string, but I want an integer

【发布时间】：2013-11-17 13:12:45

【问题描述】：

这是我的 Angular html 文件代码。在我的 mongo 数据库中 frequencyType 添加为 frequencyType = "1"，但我想要 frequencyType = NumberInt(1);

<div class="span4">
  <select class="span12 combobox" ng-model="frequencyType" required>
    <option value="1">Daily</option>
    <option value="2">Weekly</option>
    <option value="3">Monthly</option>
    <option value="4">Yearly</option>
  </select>
</div>

我进入了我的数据库frequencyType = "1"，但我想要frequencyType = NumberInt(1)。

【问题讨论】：

请重新考虑您选择的答案，因为它只是部分正确。正如 Trak 在他的回答中提到的那样，accepted 答案不适用于他的回答 确实 有效的情况。当像我这样的另一个人出现时，我宁愿看到选择的“最正确”的答案。幸运的是，我不会从表面上看任何东西，否则我会发现“答案”对我不起作用的艰难方式。 :)

【参考方案1】：

这里讨论的大多数解决方案都需要使用 ngOptions 指令，而不是在 HTML 代码中使用静态 <option> 元素，就像 OP 代码中的情况一样。

Angular 1.6.x

编辑如果您使用 Angular 1.6.x，只需使用 ng-value 指令，它将按预期工作。

angular.module('nonStringSelect', [])
.run(function($rootScope) 
  $rootScope.model =  id: 2 ;
)

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<div ng-app="nonStringSelect">
  <select ng-model="model.id">
    <option ng-value="0">Zero</option>
    <option ng-value="1">One</option>
    <option ng-value="2">Two</option>
  </select>
  
   model 
</div>

旧版本

有一种方法可以让它在仍然使用静态元素的同时工作。它显示在 AngularJS 选择指令文档中。

这个想法是使用指令在模型上注册解析器和格式化程序。当项目被选中时，解析器将进行字符串到整数的转换，而当模型发生变化时，格式化程序将进行整数到字符串的转换。

下面的代码（直接取自 AngularJS 文档页面，不是我的功劳）。

https://code.angularjs.org/1.4.6/docs/api/ng/directive/select#binding-select-to-a-non-string-value-via-ngmodel-parsing-formatting

angular.module('nonStringSelect', [])
.run(function($rootScope) 
  $rootScope.model =  id: 2 ;
)
.directive('convertToNumber', function() 
  return 
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) 
      ngModel.$parsers.push(function(val) 
        return parseInt(val, 10);
      );
      ngModel.$formatters.push(function(val) 
        return '' + val;
      );
    
  ;
);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="nonStringSelect">
  <select ng-model="model.id" convert-to-number>
    <option value="0">Zero</option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
  
   model 
</div>

【讨论】：

很好的解决方案！这应该是公认的答案。 +1

找了很久，这个很完美！

这对于 AngularJS 1.6+ 来说绝对是一个更实用的解决方案，因为 ng-options 可能由于严格比较而出现问题。

【参考方案2】：

这是迄今为止我发现的最简单的方法：

function Controller($scope) 
    $scope.options = 
        "First option" : 1,
        "Second option" : 2,
        "Last option" : 10
    
    $scope.myoption = 2;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="Controller">    
    <select ng-model="myoption" ng-options="label for (label, value) in options"></select>
    Option Selected: myoption
</div>

或者，如果你想使用数字索引：

function Controller($scope) 
    $scope.options = 
        1 : "First option",
        2 : "Second option",
        10 : "Last option"
    
    $scope.myoption = 2;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="Controller">    
    <select ng-model="myoption" ng-options="value*1 as label for (value, label) in options"></select>
    Option Selected: myoption
</div>

对于 Angular 2，follow the rabit...

【参考方案3】：

我认为这样做的角度方法是在选择标记中使用指令“convert-to-number”。

<select class="span12 combobox" ng-model="frequencyType" required convert-to-number>
    <option value="1">Daily</option>
    <option value="2">Weekly</option>
    <option value="3">Monthly</option>
    <option value="4">Yearly</option>
</select>

您可以在页面末尾查看文档和小提琴：https://docs.angularjs.org/api/ng/directive/select

【参考方案4】：

我刚刚遇到了同样的问题，并找到了正确的方法——不需要“魔法”。 :)

function MyCtrl($scope) 
    $scope.values = [
        name : "Daily", id : 1,
        name : "Weekly", id : 2,
        name : "Monthly", id : 3,
        name : "Yearly", id : 4];
    $scope.selectedItem = $scope.values[0].id;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
    <select ng-model="selectedItem" ng-options="selectedItem.id as selectedItem.name for selectedItem in values"></select>
    selectedItem: selectedItem
</div>

【讨论】：

这是正确答案，忘记其他解决方案

这对我有用，在逻辑上似乎是正确的答案。配置很容易理解，Angular 文档支持 ng-options 语法。

【参考方案5】：

有一个更简单的方法：

只需使用value*1 作为您的 id，这会将字符串转换为 int 而不会更改值...假设 id 是整数。

所以结果是>

<div ng-app ng-controller="MyCtrl">
    <select ng-model="selectedItem" ng-options="selectedItem*1 as selectedItem for selectedItem in values"></select>
    selectedItem: selectedItem
</div>

这将在更多情况下起作用，因为 indexOf 在对象中不可用，仅在数组中可用。此解决方案适用于以整数作为键的对象（例如，如果缺少某些键，或者如果您使用 db id）

【讨论】：

但是如果它不是一个整数呢？一般来说，假设是不好的;-)

该问题询问作为整数的键，如果它不是整数，并且它是一个字符串，那么正在做出更多假设，因为您信任数据源的顺序

比添加转换指令解析更好（***.com/questions/28114970/…）

我认为“+selectedItem”更好一些，但效果一样

【参考方案6】：

我建议你尝试使用indexOf。

JS

function MyCtrl($scope) 
    $scope.values = ["Daily","Weekly","Monthly","Yearly"];
    $scope.selectedItem = 0;

HTML

<div ng-app ng-controller="MyCtrl">
    <select ng-model="selectedItem" ng-options="values.indexOf(selectedItem) as selectedItem for selectedItem in values"></select>
    selectedItem: selectedItem
</div>

演示Fiddle

所以发送到mongoDB $scope.selectedItem值

【讨论】：

这对我帮助很大。这似乎很简单，但我已经花了半个多小时了:(

当您的值是特定代码或 ID 时，这不起作用。以下 Trak 的解决方案适用于所有数值。

@Erwin 你想用我的演示举个例子吗？如果我输入 [1,2,3,4,5]; 它仍然有效

@MaximShoustin 我有一个具有值和描述字段的对象列表，其中 ng-options="code.value 作为 object.codes 中代码的 code.discription" 和 ng-model="codeField ”。 codeField 需要存储代码的值，不等于索引。当我使用“object.codes.indexOf(code)”时，它会将索引存储在应该填充代码的字段上。

如果 ID 是 [32,12,44,1,900] 怎么办？如果仅按索引选择，则此方法有效。我认为对于总是从 0 开始的枚举来说，这是一个很好的解决方案