ngOptionsを使用してselect要素を表示していて、モデルをngOptionsの値として設定されている値に接続したいと考えています。
var app = angular.module('test', []);
app.controller('TestCtrl', ['$scope',
function ($scope) {
//Use random to simulate different data from an API
$scope.default = Math.floor(Math.random()*3);
$scope.options = [
{
id: 0,
name: "Option 1"
},
{
id: 1,
name: "Option 2"
},
{
id: 2,
name: "Option 3"
}
];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
<div ng-controller="TestCtrl">
<select ng-model="default" ng-options="val.name for val in options track by val.id">
</select>
<pre>Default should be ID {{default}}, or Option {{default+1}}
</div>
</div>
私が使って試してみたtrack by
、select as
と私は2つのソリューションは、仕事を見つけたが、理想的ではありません。
理想的には、デフォルトを設定できると思います
// Loop through entire array of objects
$scope.options.forEach(function (v, k) {
// Compare ID to what the default should be
if (v.id === $scope.default) {
// Set object to default
$scope.default = v;
return true;
}
});
JS
$scope.options = {
"Option 1": 0,
"Option 2": 1,
"Option 3": 2
};
HTML
<select ng-model="default" ng-options="value as key for (key, val) in options">
このソリューションで難しいのは、キーをオブジェクトにすることはできないため、オブジェクトの値が2つ以下の場合にのみ機能することです。
オブジェクト全体を含めることなく、Angularにキーでデフォルトを設定させる方法はありますか?
このようにしてみてください
<select ng-options="item.id as item.name for item in options" ng-model="selected"></select>
その後、コントローラーで
$scope.selected = 1;
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加