36

私はAngularJSの初心者であり、現在DjangoでWebアプリケーションに取り組んでおり、フロントエンド部分にAngularJSを使用しています。私の問題は、スコープからのオブジェクトが入力されているドロップダウンリストが常に空白の要素で始まることです（リストから1つを選択すると、問題はなくなります）。ユーザーがPOSTリクエストを何も選択しないと、通常は機能しなくなるため、これにより問題が発生します。事前に選択された値などの方法を知りたいのですが。これが私のコードの一部です：

タグを選択：

<select id="sel" class="input-block-level" ng-model="list_category">
            <option ng-repeat="obj in list_categories.data" value="{{obj.id}}">{{obj.name}}</option>
            <option value="Other">Other</option>
        </select>

$ scope.list_categories：

var listcategoryPromise = ListCategory.get();
    listcategoryPromise.then(function(response) {
        $scope.list_categories = {
            meta : response.data.meta,
            data : response.data.objects
        };
    });
4

6 に答える 6

59

次のように、ディレクティブを使用して、「その他」オプションからng-optionsを削除します。value

<select id="sel" class="input-block-level" ng-model="list_category" ng-options="obj.id as obj.name for obj in list_categories.data">    
    <option value="">Other</option>
</select>

これにより、list_categoryが空の場合 (エントリが選択されていない)、「その他」オプションが選択されます (デフォルト)。

jsFiddle : http://jsfiddle.net/bmleite/gkJve/

于 2013-02-05T12:35:20.527 に答える
5

以下の作業例を見つけて、オプションを使用して ng-repeat を避ける必要があるため、以下のサンプルコードを参照してください

<body ng-controller="testcontroller">
         <select ng-model="item" ng-options="item.ID as item.Title for item in items">
         </select>
            <span>{{item}}</span>
    </body>

App.controller('testcontroller', function ($scope) {
    $scope.item = '000001';
    $scope.items = [
      { ID: '000001', Title: 'Chicago' },
      { ID: '000002', Title: 'New York' },
      { ID: '000003', Title: 'Washington' }
    ];
});
于 2013-02-05T12:34:26.347 に答える
3

<select>Angularjs では、タグに特定の構文を使用できます。

ドキュメントページからインスピレーションを得ました：

<select id="sel" class="input-block-level" ng-model="list_category" ng-options="obj.name for obj in list_categories.data">
    <option value="Other">Other</option>
</select>
于 2013-02-05T12:34:43.693 に答える
2

選択リストに関する AngularJs.org Web サイトからの直接のコードを次に示します。

<select ng-model="color" ng-options="c.name for c in colors"></select>

まず、ご覧のとおり、ng-repeat を使用してオプション リストを作成する必要はありません。Angular では基本的foreachに、コレクションをループしてオプション リストを作成できます。次に、選択されている ng-model がありますが、コレクション名とは異なります。これは、投稿時に実際に収集されるアイテムになります。

function MyCntrl($scope) {
   $scope.colors = [
      {name:'black', shade:'dark'},
      {name:'white', shade:'light'},
      {name:'red', shade:'dark'},
      {name:'blue', shade:'dark'},
      {name:'yellow', shade:'light'}
  ];
  $scope.color = $scope.colors[2]; // red
}

さて、これがJavaScriptコントローラーコードです。$scope.colorsはコレクションであり$scope.color、html の選択リストに割り当てられたモデル プロパティです。この例からわかるように、モデル プロパティには、配列の 3 番目のオプションのデフォルトの開始値が与えられています。これは、最初にページをロードするために使用している http.get から設定できます。

foreach を実行しているときは、基本的にコレクションから「名前」の値を取得していて、ドロップダウンで「この値を表示」と言って、この値を投稿で使用しています。その初期モデル プロパティを設定することで、ドロップダウン リストに空のオプション フィールドが表示されることを回避できるはずです。

参考：AngularJS Select

于 2013-02-05T12:35:06.997 に答える
2

私の意見では、この答えはよりきれいです：

$scope.form = {type : $scope.typeOptions[0].value};

http://jsfiddle.net/MTfRD/2010/

于 2015-08-05T11:10:55.753 に答える
0

ng-modelの後に作成されたリスト オプションに含まれていない値を設定した場合、ドロップ ダウンの上部に空白の空のオプションが表示されますng-Repeat。元の投稿を考慮して を削除するng-modelか、有効な値を設定するng-modelと、正常に動作するか、選択した最初のアイテムを次のように設定できます 

$scope.list_category = $scope.list_categories.data[0].id;
于 2016-01-18T06:05:07.827 に答える