Angularjs ng-Optionen mit der Nummer für das Modell wählt nicht den Anfangswert

Question

Ich versuche, ng-Optionen mit einem <select> zu verwenden, um einen numerischen ganzzahligen Wert an eine Liste der entsprechenden Optionen zu binden. In meinem Controller habe ich so etwas wie dieses:

myApp.controller('MyCtrl', function() { 
    var self = this; 

    var unitOptionsFromServer = { 
     2: "mA", 
     3: "A", 
     4: "mV", 
     5: "V", 
     6: "W", 
     7: "kW" 
    }; 

    self.unitsOptions = Object.keys(unitOptionsFromServer).map(function (key) { 
     return { id: key, text: unitOptionsFromServer[key] }; 
    }); 

    self.selectedUnitOrdinal = 4; // Assume this value came from the server. 
}); 

HTML:

<div ng-controller="MyCtrl as ctrl"> 
    <div>selectedUnitOrdinal: {{ctrl.selectedUnitOrdinal}}</div> 
    <select ng-model="ctrl.selectedUnitOrdinal" ng-options="unit.id as unit.text for unit in ctrl.unitsOptions"></select> 
</div> 

Und hier ist ein jsFiddle das Problem demonstriert und einige andere Ansätze, die ich habe getroffen, aber bin nicht glücklich mit.

Die Auswahloption wird mit einem leeren Wert anstelle von "mV" initialisiert, wie in diesem Beispiel erwartet. Die Bindung scheint gut zu funktionieren, wenn Sie eine andere Option auswählen - ausgewählte UnitsOrdinal Updates ordnungsgemäß.

Ich habe festgestellt, dass wenn Sie den ursprünglichen Modellwert auf eine Zeichenfolge anstelle einer Zahl festlegen, dann funktioniert die anfängliche Auswahl (siehe # 3 in der Geige).

Ich möchte wirklich ng-Optionen mit numerischen Option Werte schön zu spielen. Wie kann ich das elegant erreichen?

Answer 1

Angulas Dokumentation für die Richtlinie ng-select erklärt, wie dieses Problem gelöst werden kann. Siehe https://code.angularjs.org/1.4.7/docs/api/ng/directive/select (letzter Abschnitt).

Sie können eine convert-to-number Richtlinie erstellen und anwenden, um sie Ihren Tag select:

JS:

module.directive('convertToNumber', function() { 
    return { 
    require: 'ngModel', 
    link: function(scope, element, attrs, ngModel) { 
     ngModel.$parsers.push(function(val) { 
     return val != null ? parseInt(val, 10) : null; 
     }); 
     ngModel.$formatters.push(function(val) { 
     return val != null ? '' + val : null; 
     }); 
    } 
    }; 
}); 

HTML:

<select ng-model="model.id" convert-to-number> 
    <option value="0">Zero</option> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
</select> 

Hinweis: Ich fand die Richtlinie aus dem Doc behandelt Nullen nicht, also musste ich es ein wenig zwicken.

Answer 2

Es ist, weil wenn Sie die unit.id erhalten, es eine Zeichenfolge nicht eine ganze Zahl zurückgibt. Objekte in Javascript speichern ihre Schlüssel als Zeichenfolgen. Der einzige Weg, dies zu tun, ist Ihr Ansatz, 4 nach Zitaten zu umschließen.

bearbeiten

<select ng-model="ctrl.selectedUnitOrdinal" ng-options="convertToInt(unit.id) as unit.text for unit in ctrl.unitsOptions"></select> 

$scope.convertToInt = function(id){ 
    return parseInt(id, 10); 
}; 

Answer 3

Angular ist Ihre id Eigenschaft als String zu sehen, fügen Sie Zitate:

self.selectedUnitOrdinal = "4"; 

Answer 4

Sie können auch Filter definieren number, wird dieser Filter automatisch String-Wert analysieren int :

<select ng-model="ctrl.selectedUnitOrdinal" ng-options="unit.id|number as unit.text for unit in ctrl.unitsOptions"></select> 


angular.module('filters').filter('number', [function() { 
     return function(input) { 
      return parseInt(input, 10); 
     }; 
    }]); 

Answer 5

Während die von Mathew Berg gelieferte Lösung funktioniert, wird sie wahrscheinlich andere Selects brechen, die sting-bewertete Auswahloptionen verwenden. Dies kann ein Problem sein, wenn Sie versuchen, eine universelle Direktive für die Behandlung von Selektionen zu schreiben (wie ich es tat).

Eine nette Abhilfe ist, zu überprüfen, ob der Wert eine Zahl ist (auch wenn es sich um eine Zeichenfolge, die eine Zahl enthalten), und nur als die Umwandlung zu tun, etwa so:

angular.module('<module name>').filter('intToString', [function() { 
     return function(key) { 
      return (!isNaN(key)) ? parseInt(key) : key; 
     }; 
    }]); 

oder als eine Controller-Methode:

$scope.intToString = function(key) { 
    return (!isNaN(key)) ? parseInt(key) : key; 
}; 

Answer 6

Nur Christophes answear hinzuzufügen: einfachste Weg, um zu achive und maintaint es eine Richtlinie zu machen ist:

JS:

.directive('convertToNumber', function() { 
    return { 
    require: 'ngModel', 
    link: function(scope, element, attrs, ngModel) { 
     ngModel.$parsers.push(function(val) { 
     //saves integer to model null as null 
     return val == null ? null : parseInt(val, 10); 
     }); 
     ngModel.$formatters.push(function(val) { 
     //return string for formatter and null as null 
     return val == null ? null : '' + val ; 
     }); 
    } 
    }; 
}); 

Christophes answear nicht funktionieren richtig für '0', da sie den Wert false zurück auf "val?" Prüfung.

Answer 7

Vielleicht ist es ein bisschen chaotisch, aber Ergebnis ohne Sonderfunktionen direkt in ng-Optionen erreicht wird

<select ng-model="ctrl.selectedUnitOrdinal" ng-options="+(unit.id) as unit.text for unit in ctrl.unitsOptions"></select> 

Answer 8

Sehr ähnlich tymeJV Antwort, einfache Abhilfe ist die Standardauswahl Zahl in einen String wie diese konvertieren :

Auf diese Weise müssen Sie die Nummer nicht fest codieren, Sie können nur jeden empfangenen Wert konvertieren. Es ist eine einfache Lösung ohne Filter oder Direktiven.

Answer 9

<select ng-model="ctrl.selectedUnitOrdinal" ng-options="+(unit.id) as unit.text for unit in ctrl.unitsOptions"></select>