451

他の投稿でそれについて読んだことがありますが、理解できませんでした。

私は配列を持っています、

$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を読んで試してみましたが、わかりません。

4

8 に答える 8

805

注意すべきことの1つは、ngOptionsが機能するにはngModelが必要であるということです... ng-model="blah"「$scope.blahを選択した値に設定する」と言っていることに注意してください。

これを試して：

<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>

AngularJS のドキュメントの詳細を次に示します (まだ見ていない場合)。

配列データ ソースの場合:

  • 配列内の値のラベル
  • 配列の値のラベルとして選択
  • 配列の値のグループごとにラベルを付ける = 配列の値のグループごとのラベルとして選択

オブジェクト データ ソースの場合:

  • オブジェクトの (key , value) のラベル
  • オブジェクトの (key , value) のラベルとして選択
  • オブジェクト内の (キー、値) のグループごとにラベルを付ける
  • オブジェクト内の (キー、値) のグループごとにラベル グループとして選択

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 を使用すると、オプション タグの内容を気にする必要がないということです。AngularJS に処理させます。スコープ内のモデルにあるものだけを気にする必要があります。

上記の動作を示し、HTML が書き出された plunker を次に示します。

デフォルトのオプションを扱う:

デフォルトのオプションに関して、上記で言及しなかったことがいくつかあります。

最初のオプションを選択し、空のオプションを削除します。

ng-initこれを行うには、モデル ( からng-model) を で繰り返す項目の最初の要素に設定する単純なものを追加しng-optionsます。

<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>

foo注:たまたま「偽物」に適切に初期化された場合、これは少しおかしくなる可能性があります。その場合、fooほとんどの場合、コントローラーでの初期化を処理する必要があります。

デフォルト オプションのカスタマイズ:

これは少し異なります。ここで行う必要があるのは、select の子としてオプション タグを追加し、値属性を空にして、その内部テキストをカスタマイズすることだけです。

<select ng-model="foo" ng-options="item as item.name for item in items">
   <option value="">Nothing selected</option>
</select>

注: この場合、別のオプションを選択した後でも、「空の」オプションはそこに残ります。これは、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>
于 2012-10-24T12:59:51.360 に答える
90

私はAngularJSを学んでいて、選択にも苦労していました。この質問はすでに回答されていることは知っていますが、それでもさらにコードを共有したいと思いました。

私のテストでは、車のメーカーと車のモデルの 2 つのリストボックスがあります。一部のメーカーが選択されるまで、モデル リストは無効になります。メーカーリストボックスの選択が後でリセットされた場合 (「メーカーの選択」に設定)、モデルリストボックスは再び無効になり、その選択もリセットされます (「モデルの選択」に)。Makes はリソースとして取得されますが、モデルはハードコーディングされているだけです。

JSON を作成します。

[
{"code": "0", "name": "Select Make"},
{"code": "1", "name": "Acura"},
{"code": "2", "name": "Audi"}
]

services.js:

angular.module('makeServices', ['ngResource']).
factory('Make', function($resource){
    return $resource('makes.json', {}, {
        query: {method:'GET', isArray:true}
    });
});

HTML ファイル:

<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>

controllers.js:

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"};
}
于 2012-11-27T20:52:34.190 に答える
16

質問はすでに回答されています（ところで、ベンによって提供された非常に優れた包括的な回答）が、完全性のために別の要素を追加したいと思います。これも非常に便利です。

ベンが提案した例では：

<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>

次のngOptionsフォームが使用されています: select as label for value in array.

Labelは式であり、その結果は<option>要素のラベルになります。その場合、より複雑なオプション ラベルを作成するために、特定の文字列連結を実行できます。

例:

  • ng-options="item.ID as item.Title + ' - ' + item.ID for item in items"次のようなラベルを付けますTitle - ID
  • ng-options="item.ID as item.Title + ' (' + item.Title.length + ')' for item in items"のようなラベルTitle (X)がX表示されます。 はタイトル文字列の長さです。

フィルターを使用することもできます。たとえば、

  • ng-options="item.ID as item.Title + ' (' + (item.Title | uppercase) + ')' for item in items"Title (TITLE)Title プロパティの Title 値と TITLE は同じ値ですが、大文字に変換されます。
  • ng-options="item.ID as item.Title + ' (' + (item.SomeDate | date) + ')' for item in items"Title (27 Sep 2015)モデルにプロパティがある場合、 のようなラベルが付けられますSomeDate
于 2015-09-28T10:59:01.093 に答える
7

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>
于 2013-09-06T05:51:47.490 に答える
6

オプションごとにカスタム タイトルが必要な場合ng-optionsは、適用されません。代わりng-repeatにオプションを使用します。

<select ng-model="myVariable">
  <option ng-repeat="item in items"
          value="{{item.ID}}"
          title="Custom title: {{item.Title}} [{{item.ID}}]">
       {{item.Title}}
  </option>
</select>
于 2016-07-13T21:08:25.900 に答える
1

便利です。バインディングは常に機能するとは限りません。

<select id="product" class="form-control" name="product" required
        ng-model="issue.productId"
        ng-change="getProductVersions()"
        ng-options="p.id as p.shortName for p in products"></select>

たとえば、オプション リストのソース モデルを REST サービスから入力します。選択された値は、リストに入力する前にわかっていて、設定されていました。$http で REST リクエストを実行すると、list オプションが実行されます。

しかし、選択したオプションは設定されていません。不明な理由により、シャドウ $digest の実行中の AngularJS は、選択されたバインドを適切にバインドしません。選択したものを設定するには、jQuery を使用する必要があります。大事です！シャドウの AngularJS は、ng-repeat オプションによって生成される属性「値」の値にプレフィックスを追加します。int の場合は「number:」です。

$scope.issue.productId = productId;
function activate() {
    $http.get('/product/list')
       .then(function (response) {
           $scope.products = response.data;

           if (productId) {
               console.log("" + $("#product option").length);//for clarity
               $timeout(function () {
                   console.log("" + $("#product option").length);//for clarity
                   $('#product').val('number:'+productId);

               }, 200);
           }
       });
}
于 2017-03-09T15:18:14.663 に答える