angularjs - angularjs で動的制御を生成する

Question

AngularJS + Asp.net Web API を使用して、サンプルのシングルページ Web アプリケーションを開発しています。私は自分自身を助けることができないある時点で立ち往生しており、グーグルを試してみましたが成功しませんでした。

私のシナリオは次のとおりです。

私は2つのエンティティ1）車と2）ディーラーを持っています。リンクテーブル Car_Dealer が 1 つあります。サンプルシナリオによると、特定の車を複数のディーラーで販売できます。したがって、サーバー側の私のモデルは次のようになります。

車のモデル

namespace HelloWebAPI.Models
{
    using System;
    using System.Collections.Generic;

    public partial class Car
    {
        public Car()
        {
            this.Car_Dealer = new HashSet<Car_Dealer>();
        }

        public int CarId { get; set; }
        public string CarName { get; set; }
        public string CarDetails { get; set; }

        public virtual ICollection<Car_Dealer> Car_Dealer { get; set; }
    }
}

ディーラーモデル

namespace HelloWebAPI.Models
{
    using System;
    using System.Collections.Generic;

    public partial class Dealer
    {
        public Dealer()
        {
            this.Car_Dealer = new HashSet<Car_Dealer>();
        }

        public int DealerId { get; set; }
        public string DealerName { get; set; }
        public string DealerLocation { get; set; }

        public virtual ICollection<Car_Dealer> Car_Dealer { get; set; }
    }
}

カーディーラーモデル

namespace HelloWebAPI.Models
{
    using System;
    using System.Collections.Generic;

    public partial class Car_Dealer
    {
        public int Car_DealerId { get; set; }
        public int CarId { get; set; }
        public int DealerId { get; set; }

        public virtual Car Car { get; set; }
        public virtual Dealer Dealer { get; set; }
    }
}

私のサーバー側コントローラーのPOST方法は以下の通りです。

カーコントローラー.CS

public void Post(Car NewCar)
{
    //to save the car data in the database.
    Car NewCarObj = new Car();
    NewCarObj.CarName = NewCar.CarName;
    NewCarObj.CarDetails = NewCar.CarDetails;
    objEntities.Cars.Add(NewCarObj);

    foreach (Car_Dealer dealer in NewCar.Car_Dealer)
    {
        dealer.CarId = NewCarObj.CarId;
        dealer.DealerId = NewCarObj.DealerId;
        objEntities.Car_Dealers.Add(dealer);
        objEntities.SaveChanges();
    }
}

App.jsファイル内のコードは次のとおりです。

App.JS

var CreateCarCtrl = function ($scope, $location, Car, Dealer) {
    $scope.items = Dealer.query({ q: $scope.query });
    $scope.save = function () {
        Car.save($scope.item);
        $location.path('/CarListingScreen');
    };
};

そして、これは私のテンプレートファイルからのコードの塊ですAddCar.HTML

AddCar.HTML

<tr>
    <td>
        <label class="control-label" for="DealerName">Add Dealer</label>
    </td>
    <td>
        <ul>
            <li>
                <select ng-model="item.DealerName">
                    <option ng-repeat="item in items">{{item.DealerName}}</option>
                </select>
                [<a href ng-click="items.splice($index, 1)">Remove</a>]
            </li>
            <li>[<a href ng-click="items.push({})">Add More</a>]
            </li>
        </ul>
    </td>
</tr>

テンプレートファイルでわかるように、編集目的でも同じテンプレートを使用しているため、ドロップダウンリストにディーラーのリストを双方向バインディングでレンダリングしようとしています。

うまくいけば、あなたはシナリオを手に入れました。

以下は、私が解決策を探している質問です

{{item.DealerName}}そのデータをサーバーに戻すことができるように、別のものに置き換える必要があります。何を交換する必要がありますか？
削除機能も追加機能も機能していません。どうすれば機能させることができますか？
レコードの編集中にデータをロードするにはどうすればよいですか? ディーラーをドロップダウンに記入し、ディーラーを処理するためにそれに応じてドロップダウンの数を作成することを意味しますか?

ここでは、複数のディーラーを追加できるため、テンプレートでも処理する必要があることに注意してください。

編集

私のフォームは以下のようになります。

ポスト番号: 18359975

スクリーンショットでわかるように、ユーザーは特定の車に複数のディーラーを追加でき、追加したアイテムを削除することもできます。

<Collection>車のディーラーのようにディーラーのドロップダウンリストをバインドする方法は?
[さらに追加]ボタンをクリックしてドロップダウンリストを動的にレンダリングし、サーバー側でこの値を取得するにはどうすればよいですか?

よろしくお願いします。

score 2 · Accepted Answer

コードにはまだ重要な部分が欠けているため、すべての質問に答えることができません。でもやってみようかな

{{item.DealerName}} を別のものに置き換えて、そのデータをサーバーに戻す必要があります。何を交換する必要がありますか？

このための ng-model はitem.DealerId. 完全な車のモデルを投稿する場合、完全なディーラーオブジェクトは必要ありません。ID だけで十分です。サーバーでは、車を保存する前に、関連付けに基づいてディーラーデータを取得する必要があります。

削除機能も追加機能も機能していません。どうすれば機能させることができますか？

各ディーラーに対して削除ボタンを配置してディーラーを削除しようとしていると仮定すると、削除ボタンが外にあり、外では使用できないng-repeatため、削除が機能していないことがわかります。$index試す

<select ng-model="item.DealerName">
                    <option ng-repeat="item in items">{{item.DealerName}}</option>
                    [<a href ng-click="items.splice($index, 1)">Remove</a>]
                </select>

3点目

レコードの編集中にデータをロードするにはどうすればよいですか? ディーラーをドロップダウンに記入し、ディーラーを処理するためにそれに応じてドロップダウンの数を作成することを意味しますか?

クライアント側には、ディーラーのリスト用のモデルが必要です。これは、事前に定義するか、サーバーから取得できます。車にのようなディーラーが複数ある場合Car.dealersは、ng-repeat を実行してそれらをレンダリングします。

<div ng-repeat='dealer in Car.dealers'>
    <select ng-model='dealer.id'ng-options='d.name for d in allDealers'> 
</div>

angularjs - angularjs で動的制御を生成する

1 に答える 1

Related

Reference