ng-select дает только строку, но я хочу целое число
это мой угловой код html-файла .
В моей базе данных mongo frequencyType
добавить как frequencyType = "1"
но я хочу!--3-->
<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"
но я хочу!--5-->.
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>
демо Скрипка
так отправить в mongoDB $scope.selectedItem
стоимостью
есть более простой способ:
просто использовать value*1
как Ваш идентификатор, который преобразует строку в 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 недоступен в объектах, только в массивах. Это решение работает для объектов с целыми числами в качестве ключей (например, если некоторые ключи отсутствуют или если вы используете идентификаторы БД)
большинство решений, обсуждаемых здесь, требуют использования директивы ngOptions вместо использования static <option>
элементы в HTML-коде, как и в коде OP.
Угловое 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 select.
идея состоит в том, чтобы использовать директиву для регистрации парсера и форматера на модели. Парсер будет выполнять преобразование string-to-int при выборе элемента, а форматер будет выполнять преобразование int-to-string при изменении модели.
код ниже (берется непосредственно со страницы документации AngularJS, кредит не подкопать.)
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>
у меня просто была такая же проблема и я понял, как это сделать-не требуется "магия". :)
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>
Я думаю, что угловой способ сделать это-использовать директиву "convert-to-number" в теге select.
<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
Это самый простой способ я нашел до сих пор:
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>
Угловое 2, следуйте Рабит...