Polulate dynamic control in angularjs

Question

I've been developing a sample Single Page Web application using AngularJS + Asp.net Web API. I've been stuck at one point where I am not able to help my self, I've tried googling without any success.

My scenario is as following.

I've two entity 1)Car & 2)Dealer. I've one link table Car_Dealer. As per my sample scenario a specific car can be sold at multiple dealer. So my models at server side looks like below.

Car Model

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

Dealer Model

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

Car Dealer Model

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

My server side controllers POST method is as below.

CarController.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();
    }
}

Code in App.js file is as below.

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');
    };
};

And this one is chunk of code from my template file that is 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>

As we can see in Template file, I am trying to render the list of dealer in Drop Down list by two way binding as I am using the same template for Editing purpose also.

Hopefully you've got the scenario.

Now following are the questions for which I am looking for solutions

1. I should replace {{item.DealerName}} with something else so I can get that data back at server. What should be replaced ?

2. Neither Remove Nor Add More functionality is working. How can I make it functioning ?

3. How can I load data while editing the record ? I mean getting dealers filled in Dropdown & Creating number of dropdown accordingly to handle dealer ?

Please note here I can add more than one dealer so it should be handled in template also.

Edit

My form looks like below.

As we can see in screen shot user can add multiple dealers for specific car & Can remove added item also.

• How to bind dropdown list of dealer as it's <Collection> of car dealer ?

• How can I render Dropdown list dynamically while clicking Add More button & Getting this values back at server side?

Thanks a lot in advance.

Answer 1

There are still essential parts missing form your code so, i cannot answer all questions. But let me take a try

I should replace {{item.DealerName}} with something else so I can get that data back at server. What should be replaced ?

The ng-model for this should be item.DealerId. When you post the complete car model it does not need to have the complete dealer object, just the Id should be enough. On the server you should get the dealer data based on your association before saving the car.

Neither Remove Nor Add More functionality is working. How can I make it functioning ?

I can tell remove is not working because the remove button is outside the ng-repeat and $index is not available outside, assuming you are trying Dealer to be removed by placing the remove button against each dealer. Try

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

For third point

How can I load data while editing the record ? I mean getting dealers filled in Dropdown & Creating number of dropdown accordingly to handle dealer ?

There should be a model on client side for list of dealers, which you can predefine or get it from server. If the car has multiple dealers like Car.dealers, do a ng-repeat to render them

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