他の記事で読んだことがありますが、わかりませんでした。
私は配列を持っています。
$scope.items = [
{ID: '000001', Title: 'Chicago'},
{ID: '000002', Title: 'New York'},
{ID: '000003', Title: 'Washington'},
];
としてレンダリングしたいと思います。
<select>
<option value="000001">Chicago</option>
<option value="000002">New York</option>
<option value="000003">Washington</option>
</select>
また、ID=000002のオプションを選択したいと思います。
select][1]*を読んで試してみたのですが、わかりませんでした。
注意すべき点は、ngOptionsが機能するためにはngModelが必須であるということです... ng-model="blah"
は、"set $scope.blah to the selected value"と言っていることに注意してください。
これを試してみてください。
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
AngularJSのドキュメントをご覧になっていない方は、こちらをご覧ください。
配列データソースの場合。
- 配列内の値のラベル
- 配列の値のラベルとして選択
- 配列内の値に対するグループ別のラベル = select as label group by group for value in array
オブジェクトデータソースの場合
オブジェクトデータソースの場合: > - オブジェクト内の(キー , 値)に対するラベル
AngularJSでのオプションタグの値についての説明です。
ng-options`を使用すると、ng-optionsによって書き出されるオプションタグの値は、常にそのオプションタグが関連する配列アイテムのインデックスになります。これは、AngularJSでは実際に、プリミティブタイプだけでなく、セレクトコントロールでオブジェクト全体を選択することができるからです。例えば、以下のようになります。
app.controller('MainCtrl', function($scope) {
$scope.items = [
{ id: 1, name: 'foo' },
{ id: 2, name: 'bar' },
{ id: 3, name: 'blah' }
];
});
<div ng-controller="MainCtrl">
<select ng-model="selectedItem" ng-options="item as item.name for item in items"></select>
<pre>{{selectedItem | json}}</pre>
</div>
上記により、オブジェクト全体を $scope.selectedItem
に直接選択できるようになります。**要は、AngularJSでは、optionタグの中身を気にする必要はないということです。スコープ内のモデルに何があるかだけを気にすればいいのです。
上記の動作を実演し、HTMLを書き出したプランカーを紹介します
デフォルトのオプションを扱う。
デフォルト・オプションに関連して、上記で言及しなかったことがいくつかあります。
1つ目のオプションを選択し、空のオプションを削除する:。
これを実現するには、シンプルな ng-init
を追加して、ng-options
で繰り返し指定する項目の最初の要素に (ng-model
から) モデルを設定します。
<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>
注意: これは、foo
が何か "falsy" で適切に初期化された場合に、少しおかしくなる可能性があります。そのような場合には、おそらくコントローラで foo
の初期化を処理することになるでしょう。
デフォルトのオプションをカスタマイズする:。
これは少し違います。ここでは、selectの子としてoptionタグを追加し、空のvalue属性をつけて、その内側のテキストをカスタマイズするだけです。
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="">Nothing selected</option>
</select>
注意:この場合、別のオプションを選択しても、"empty"オプションはそのまま残ります。これは、AngularJSでのセレクトのデフォルトの動作ではありません。
**選択後に隠れるようにカスタマイズされたデフォルトのオプション:***。
カスタマイズしたデフォルトのオプションを、値を選択した後に消えてしまうようにしたい場合は、デフォルトのオプションにng-hide属性を追加します。
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="" ng-if="foo">Select something to remove me.</option>
</select>
私はAngularJSを学んでいますが、選択にも悩んでいました。この質問はすでに回答されていると思いますが、それでももう少しコードを共有したいと思いました。
私のテストでは、メーカーと車種の2つのリストボックスがあります。車種リストは、あるメーカーが選択されるまで無効になっています。makesリストボックスの選択が後でリセットされると( 'Select Make'に設定)、modelsリストボックスは再び無効になり、その選択もリセットされます( 'Select Model'に設定)。メイクスはリソースとして取得されますが、モデルは単にハードコードされています。
[
{"code": "0", "name": "Select Make"},
{"code": "1", "name": "Acura"},
{"code": "2", "name": "Audi"}
]
angular.module('makeServices', ['ngResource']).
factory('Make', function($resource){
return $resource('makes.json', {}, {
query: {method:'GET', isArray:true}
});
});
<div ng:controller="MakeModelCtrl">
<div>Make</div>
<select id="makeListBox"
ng-model="make.selected"
ng-options="make.code as make.name for make in makes"
ng-change="makeChanged(make.selected)">
</select>
<div>Model</div>
<select id="modelListBox"
ng-disabled="makeNotSelected"
ng-model="model.selected"
ng-options="model.code as model.name for model in models">
</select>
</div>
function MakeModelCtrl($scope)
{
$scope.makeNotSelected = true;
$scope.make = {selected: "0"};
$scope.makes = Make.query({}, function (makes) {
$scope.make = {selected: makes[0].code};
});
$scope.makeChanged = function(selectedMakeCode) {
$scope.makeNotSelected = !selectedMakeCode;
if ($scope.makeNotSelected)
{
$scope.model = {selected: "0"};
}
};
$scope.models = [
{code:"0", name:"Select Model"},
{code:"1", name:"Model1"},
{code:"2", name:"Model2"}
];
$scope.model = {selected: "0"};
}
CoffeeScriptでは。
#directive
app.directive('select2', ->
templateUrl: 'partials/select.html'
restrict: 'E'
transclude: 1
replace: 1
scope:
options: '='
model: '='
link: (scope, el, atr)->
el.bind 'change', ->
console.log this.value
scope.model = parseInt(this.value)
console.log scope
scope.$apply()
)
<!-- HTML partial -->
<select>
<option ng-repeat='o in options'
value='{{$index}}' ng-bind='o'></option>
</select>
<!-- HTML usage -->
<select2 options='mnuOffline' model='offlinePage.toggle' ></select2>
<!-- Conclusion -->
<p>Sometimes it's much easier to create your own directive...</p>