7

ng-repeat内でng-modelを使用する方法を理解するのに苦労しています。このコンテキストでは、CargoItemsはLoadPointを持つオブジェクトのリストです。LoadPointにはIdプロパティとTextプロパティがあります。

ドロップダウンの現在の選択にバインドされたテキストを表示したいのですが、もちろんどのIDが選択されているかも追跡したいと思います。そのため、タグを明示的に使用するか、まだ実際には理解していないng-optionsを使用して、selectバインディングで両方のプロパティを更新する方法がわかりません。

したがって、2つの質問：

1）選択リストのテキストと値の両方をCargoItem.LoadPointのIdプロパティとTextプロパティに適切にバインドするにはどうすればよいですか？ng-modelが間違っているのではないかと感じていますか？

2）ng-optionsを使用して、選択した値をデフォルトにするにはどうすればよいですか？私はこれを自分のオプションタグを書くことで理解しましたが、可能であればng-optionsを使用したいと思います。

<div ng-repeat="cargoItem in cargo.CargoItems">
    <span>Selected Load Point: {{cargo.LoadPoint.Text}}</span> 
    <select ng-model="cargoItem.LoadPoint" ng-options="loadPoint.Id as loadPoint.Text for loadPoint in LoadPoints"></select>
</div>

前もって感謝します！

4

1 に答える 1

13

  1. 'Id'プロパティ（loadPoint.Id）を使用する代わりに、オブジェクト参照全体にバインドします。これを行うには、を変更してパーツng-optionsを削除するだけです。loadPoint.Id as

    <select ng-model="cargoItem.LoadPoint" ng-options="loadPoint.Text for loadPoint in LoadPoints"></select>

  2. 上記のアプローチとLoadPointsオブジェクトへの正しい参照を使用すると、Angularが自動的にそれを行います。直接LoadPointsオブジェクト参照を使用する方法の例を次に示します。

    $scope.LoadPoints = [{ Id: '1', Text: 'loadPointA' },{ Id: '2', Text: 'loadPointB' }];        
$scope.cargo = {
    CargoItems: [{
        LoadPoint: $scope.LoadPoints[0]
    }, {
        LoadPoint: $scope.LoadPoints[1]
    }]
};

    このアプローチを使用すると、 （ngModel）は、Id（ie）だけでなく、cargoItem.LoadPointLoadPointsオブジェクト全体（ie）への参照を常に保持します。{ Id: '1', Text: 'loadPointA' }'1'

jsFiddle： http: //jsfiddle.net/bmleite/baRb5/

于 2013-02-07T11:39:34.637 に答える