angularjs - change - ng-select da solo una cadena, pero quiero un entero

ng-switch angularjs

Question

Este es mi código de archivo html angular. En mi base de datos mongo, frequencyType agregado como frequencyType = "1" pero quiero 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>

Me frequencyType = NumberInt(1) en mi base de datos frequencyType = "1" pero quiero frequencyType = NumberInt(1) .

Answer 1

Acabo de tener el mismo problema y descubrí la forma correcta de hacerlo: no se requiere ''magia''. :)

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>

Answer 2

Creo que la forma angular de hacer esto es usar la directiva "convertir a número" en la etiqueta de selección.

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

Puede ver la documentación y un violín aquí al final de la página: https://docs.angularjs.org/api/ng/directive/select

Answer 3

Esta es la forma más fácil que he encontrado hasta ahora:

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>

O bien, si desea usar índices numéricos:

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>

Para Angular 2, sigue el rabit ...

Answer 4

Hay una manera más fácil:

Simplemente use value*1 como su id, que convertirá la cadena a int sin cambiar el valor ... suponiendo que el id es un entero.

entonces el resultado es>

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

Esto funcionará en más casos, ya que indexOf no está disponible en objetos, solo en matrices. Esta solución funciona para objetos con números enteros como claves (por ejemplo, si faltan algunas claves, o si usa identificadores db)

Answer 5

La mayoría de las soluciones que se discuten aquí requieren el uso de la directiva ngOptions en lugar de usar elementos <option> estáticos en el código HTML, como fue el caso en el código del OP.

Angular 1.6.x

Editar Si usa Angular 1.6.x, solo use la directiva ng-value y funcionará como se espera.

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>

versiones anteriores

Hay una manera de hacerlo funcionar mientras se usan elementos estáticos. Se muestra en la documentación de la directiva de selección AngularJS.

La idea es usar una directiva para registrar un analizador y un formateador en el modelo. El analizador realizará la conversión de cadena a int cuando se seleccione el elemento, mientras que el formateador realizará la conversión int-to-string cuando cambie el modelo.

Código a continuación (tomado directamente de la página de documentación de AngularJS, crédito no mío).

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>

Answer 6

Te sugiero que intentes usar 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>

Demo Fiddle

Por lo tanto, envíelo a mongoDB $scope.selectedItem value