<option>
ここで説明するほとんどのソリューションでは、OP のコードの場合のように、HTML コードで静的要素を使用する代わりに ngOptions ディレクティブを使用する必要があります。
角度 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 選択ディレクティブのドキュメントに示されています。
アイデアは、ディレクティブを使用してパーサーとフォーマッターをモデルに登録することです。項目が選択されると、パーサーは文字列から int への変換を行いますが、モデルが変更されると、フォーマッターは int から文字列への変換を行います。
以下のコード (AngularJS のドキュメント ページから直接取得したものです。私のものではありません)。
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>