Question

我一直在使用AngularJS + Asp.net Web API开发示例单页Web应用程序。我一直被困在一个我无法帮助自己的地方，我试过谷歌搜索没有任何成功。

我的方案如下。

我有两个实体1）Car＆amp; 2）经销商。我有一个链接表Car_Dealer。根据我的示例场景，可以在多个经销商处销售特定的汽车。所以我在服务器端的模型如下所示。

汽车模型

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方法如下。

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

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}}，以便我可以在服务器上获取该数据。应该替换什么？
删除或添加更多功能均无效。我怎样才能让它正常运作？
如何在编辑记录时加载数据？我的意思是让经销商填写Dropdown＆amp;相应地创建下拉数量以处理经销商？

请注意，我可以添加多个经销商，因此也应该在模板中处理。

修改

我的表单如下所示。

Post No: 18359975

正如我们在屏幕截图中看到的，用户可以为特定的汽车添加多个经销商。也可以删除添加的项目。

如何绑定经销商的下拉列表，因为它是汽车经销商的<Collection>？
如何在点击“添加更多”按钮时动态呈现下拉列表。在服务器端获取此值？

提前多多感谢。

Answer 1

您的代码中仍然缺少必要的部分，所以我无法回答所有问题。但让我试一试

我应该用其他东西替换{{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>

第三点

如何在编辑记录时加载数据？我的意思是让经销商填写Dropdown＆amp;创建相应的下拉数量来处理经销商？

客户端应该有一个模型供经销商列表，您可以预定义或从服务器获取。如果汽车有多个经销商，如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中填充动态控件

1 个答案: