web-dev-qa-db-fra.com

ng-select ne donne qu'une chaîne mais je veux un entier

Ceci est mon angular html. Dans ma base de données mongo frequencyType ajouté comme frequencyType = "1" Mais je veux 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>

Je reçois dans ma base de données frequencyType = "1" Mais je veux frequencyType = NumberInt(1).

angularjsselect
37
Nishchit Dhanani

Je vous suggère d'essayer d'utiliser 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>

Démo Fiddle

Alors envoyez à mongoDB $scope.selectedItem valeur

10
Maxim Shoustin

Il existe un moyen plus simple:

Utilisez simplement value*1 comme votre id, qui convertira la chaîne en int sans changer la valeur ... en supposant que l'id est un entier.

donc le résultat est>

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

Cela fonctionnera dans plus de cas, car indexOf n'est pas disponible dans les objets, uniquement dans les tableaux. Cette solution fonctionne pour les objets avec des entiers comme clés (par exemple si certaines clés sont manquantes ou si vous utilisez des identifiants db)

60
Trak

La plupart des solutions discutées ici nécessitent l'utilisation de la directive ngOptions au lieu d'utiliser statique <option> éléments dans le code HTML, comme c'était le cas dans le code de l'OP.

Angulaire 1.6.x

Modifier Si vous utilisez Angular 1.6.x, utilisez simplement la directive ng-value et cela fonctionnera comme prévu.

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>

Versions plus anciennes

Il y a est un moyen de le faire fonctionner tout en utilisant des éléments statiques. Il est indiqué dans la documentation de la directive select AngularJS.

L'idée est d'utiliser une directive pour enregistrer un analyseur et un formateur sur le modèle. L'analyseur effectuera la conversion chaîne-en-int lorsque l'élément est sélectionné, tandis que le formateur effectuera la conversion int-en-chaîne lorsque le modèle change.

Code ci-dessous (tiré directement de la page de documentation AngularJS, crédit pas le mien).

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>
40
Philippe Plantier

Je viens d'avoir le même problème et j'ai trouvé la bonne façon de le faire - pas de "magie" requise. :)

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>
33
Andrzej Gis

Je pense que la manière angular pour ce faire est d'utiliser la directive "convert-to-number" dans la balise 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>

Vous pouvez voir la documentation et un violon ici à la fin de la page: https://docs.angularjs.org/api/ng/directive/select

12
Allenile

C'est le moyen le plus simple que j'ai trouvé jusqu'à présent:

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>

Ou, si vous souhaitez utiliser des index numériques:

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>

Pour Angular 2, suivez le rabit ...

8
lepe