1

安らかなサービスから入力されたレコードを更新するために使用されるフォームがあります。

フィールドの 1 つはルックアップ値の選択を使用し、それをモデル内のオブジェクトにバインドしています。

選択は正しく作成され、オプションを選択するとモデルが正しく変更されます。

問題は、最初にページをロードしたときに選択が空白になることです。

ルックアップ オブジェクトをクロールして ID を照合し、自動生成されたインデックスの位置を取得することなく、初期値を正しく設定する方法はありますか?

または、自動生成されたインデックスではなく、値をオブジェクトに設定します。

<div ng-controller="MyCtrl">
    Id: <input ng-model="course.id" readonly><br>
    Cost: <input ng-model="course.cost" ng-required="true"><br>
    Title: <select ng-model="course.courseTitle" ng-options="title.name for title in courseTitles">
      </select> {{course.courseTitle.description}}<br>
    Length: <input ng-model="course.length" ng-required="true"><br>
    <br>
    Id: {{course.id}}<br>
    Cost: {{course.cost}}<br>
    Title: {{course.courseTitle.name}}<br>
    Length: {{course.length}}
</div>

function MyCtrl($scope) {
    $scope.course = {
        "id": "108",
        "cost": "155",
        "courseTitle": {
            "description": "Description of course 37.",
            "id": "37",
            "name": "Course 37 Name"
        },
        "length": "7"
    };

    $scope.courseTitles = [{
        "description": "Description of course 37.",
        "id": "37",
        "name": "Course 37 Name"},
    {
        "description": "Description of course 63.",
        "id": "67",
        "name": "Course 63 Name"},
    {
        "description": "Description of course 88.",
        "id": "88",
        "name": "Course 88 Name"}];

}

ここでフィドルを作成しました - http://jsfiddle.net/bcarter/Jxydp/

4

3 に答える 3

5

ng-options の「track by」句を使用する

<select ng-model="course.courseTitle" 
        ng-options="title.name for title in courseTitles track by title.id">
</select>

これにより、比較で title == other の代わりに title.id == other.id によるチェックが行われます。

于 2014-09-28T15:05:14.903 に答える
1

これは、ここで作業している 2 つの異なるオブジェクトがあるためです。あなたが持っている

    {
        "description": "Description of course 37.",
        "id": "37",
        "name": "Course 37 Name"
    }

2 回定義され、2 つの異なる参照が作成されます。同じオブジェクトを使用すると、期待どおりに機能します。http://jsfiddle.net/Jxydp/14/を参照してください（おそらくもっと良い方法がありますが、それは私の要点を示しています）

于 2012-12-07T00:05:26.157 に答える
0

これは少し独断的かもしれませんが、データの構造を変更した方がよいと思います。モデルに配列を用意するだけです

$scope.courses = [{
    "cost": "155",
    "description": "Description of course 37.",
    "id": "37",
    "name": "Course 37 Name",
    "length": "8"
},{
    "cost": "156",
    "description": "Description of course 63.",
    "id": "67",
    "name": "Course 63 Name",
    "length": "9"        
},{
    "cost": "157",
    "description": "Description of course 88.",
    "id": "88",
    "name": "Course 88 Name",
    "length": "9"        
}];

次に、要素のngModelと の両方を次のように変更ngOptionsしますselect

<select ng-model="course" ng-options="course.name for course in courses">

そして、コントローラーでangularに、コース内のコースを最初のコースとして設定するように指示します

$scope.course = $scope.courses[0];

このようにして、別のオブジェクトについて心配する必要はなく、同期を保つためにAngularに任せてください。

JSfiddle はこちらhttp://jsfiddle.net/jaimem/uuCfx/1/

于 2012-12-07T00:29:33.457 に答える