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

I should replace {{item.DealerName}} with something else so I can get that data back at server. What should be replaced ?
Neither Remove Nor Add More functionality is working. How can I make it functioning ?
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.

Post No: 18359975

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.

BenMorel · Accepted Answer · 2014-07-14 19:18:16Z

2

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>

edited Jul 14, 2014 at 19:18

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Aug 21, 2013 at 14:35

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

IT ppl Over a year ago

Thanks for your effort. Can you please let me know what other part are required to make this question complete? So It would be more helpful to the answerer also. As you can see in Car Model DealerId is not a direct property but it's a part of Car_Dealer model and I've collection of Car_Dealer in my Car class. So can we get the DealerId directly? One more point I may have multiple dealer associated with a single car, So will it be handled using the same?

IT ppl Over a year ago

Regarding my third point : Suppose I've two cars, Car1 and Car2. now, Car1 has 2 dealers associated with it while Car2 has 5 dealers associated with it. So if I am editing Car1 than it should display two dropdown on edit screen and if I am editing Car2 than it should display five dropdown filled with the dealers. How can I achieve the same? Hope It would help you understanding my question.

Chandermani Over a year ago

Retrieving DealerId in your case depends upon the model you send to client when doing a GET. If the dealerId is inside Car->Car_Dealer->DealerId and you are sending this data to client, then indeed you would get it under Car.Car_Dealer.DealerId. All depends upon what you send to client. Regarding sending back data on POST, i meant that the object you send back for Car can have only the selected dealer id's and full Car_Dealer object is not required, you can do the mappind on server side.

Collectives™ on Stack Overflow

Polulate dynamic control in angularjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related