Angular 1.6.x

Question

这是我的角度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)。

Answer 1

有一种更简单的方法：

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

所以结果是＆gt;

<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）

Answer 2

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

Angular 1.6.x

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

旧版本

是一种在仍然使用静态元素的同时使其工作的方法。它在AngularJS select指令文档中显示。

这个想法是使用一个指令在模型上注册解析器和格式化程序。选择项时，解析器将执行string-to-int转换，而格式化程序将在模型更改时执行int-to-string转换。

下面的代码（直接来自AngularJS文档页面，不是我的信用）。

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

＆＃13;

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;
      });
    }
  };
});

＆＃13;

<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>

＆＃13;

Answer 3

我遇到了同样的问题并找到了正确的方法 - 不需要“神奇”。：）

mPreviewRequestBuilder

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;
}

Answer 4

我认为这样做的有条理的方法是在select标签中使用指令“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

Answer 5

我建议您尝试使用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值

Answer 6

这是我到目前为止找到的最简单的方法：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

对于Angular 2，follow the rabit ...

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

6 个答案:

Angular 1.6.x

旧版本