これは私のangular htmlファイルコードです。mongoデータベースではfrequencyType
が_frequencyType = "1"
_として追加されましたが、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>
_
私はデータベース_frequencyType = "1"
_を取得しますが、frequencyType = NumberInt(1)
が必要です。
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>
デモ Fiddle
MongoDBに送信する$scope.selectedItem
値
より簡単な方法があります:
単にvalue*1
をIDとして、値を変更せずに文字列を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はオブジェクトではなく配列でのみ使用できるため、これはより多くの場合に機能します。このソリューションは、キーとして整数を持つオブジェクトに対して機能します(たとえば、一部のキーが欠落している場合、またはdb idを使用する場合)
ここで説明するほとんどのソリューションでは、OPコードの場合のように、HTMLコードで静的<option>
要素を使用する代わりにngOptionsディレクティブを使用する必要があります。
EditAngular 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ディレクティブのドキュメントに示されています。
アイデアは、ディレクティブを使用してモデルにパーサーとフォーマッターを登録することです。アイテムが選択されると、パーサーは文字列から整数への変換を行い、フォーマッターはモデルが変更されたときに整数から文字列への変換を行います。
以下のコード(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>
angularこれを行う方法は、selectタグでディレクティブ「convert-to-number」を使用することだと思います。
<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>
For Angular 2、 rabitに従う ...