angularjs - 如何从angularjs中的父元素获取子元素的值

问题描述

我有两个数据库表，一个是父级，另一个是子级。父表有对子表的引用。数据库表是使用代码优先方法生成的，数据模型如下：

[Table("Family")]
public partial class Family
{
    public int Id { get; set; }
    public string Surname { get; set; }
    public string FirstName { get; set; }
    public int RoleId { get; set; }
    public int FuId { get; set; }
    public int RiskAreaId { get; set; }
    public int LocationId { get; set; }
    public DateTime CreatedDate { get; set; }

    [ForeignKey("RoleId")]
    public virtual Role Role { get; set; }
    [ForeignKey("FuId")]
    public virtual FamilyUnit FamilyUnit { get; set; }
    [ForeignKey("RiskAreaId")]
    public virtual RiskArea RiskArea { get; set; }
    [ForeignKey("LocationId")]
    public virtual Location Location { get; set; }
}

以及下面的 FamilyUnit 表：

[Table("FamilyUnit")]
public partial class FamilyUnit
{       
    public int Id { get; set; }
    [Column(TypeName = "varchar")]
    [StringLength(50)]
    [Required]
    public string FamilyUnitName { get; set; }
    public virtual IEnumerable<Family> Families { get; set; }
}

然后我创建了一个 webAPI 项目，以便我的项目可以使用这些 API。我的 Api 如下所示：

[EnableCors("*", "*", "*")]
public class FamilyUnitController : ApiController
{
    FamilyUnitBs familyUnitObjBs;

    public FamilyUnitController()
    {
        familyUnitObjBs = new FamilyUnitBs();
    }

    [ResponseType(typeof(IEnumerable<FamilyUnit>))]
    public IHttpActionResult Get()
    {
        var famUnits = familyUnitObjBs.GetALL();
        return Ok(famUnits);
    }

    [ResponseType(typeof(FamilyUnit))]
    public IHttpActionResult Get(int id)
    {
        FamilyUnit familyUnit = familyUnitObjBs.GetByID(id);
        if (familyUnit != null)
            return Ok(familyUnit);
        else
            return NotFound();
    }

    [ResponseType(typeof(FamilyUnit))]
    public IHttpActionResult Delete(int id)
    {
        FamilyUnit familyUnit = familyUnitObjBs.GetByID(id);
        if (familyUnit != null)
        {
            familyUnitObjBs.Delete(id);
            return Ok(familyUnit);
        }
        else
        {
            return NotFound();
        }
    }
}

然后我创建了另一个项目，调用应用程序的前端来使用 API 方法。

下面是带有工厂服务的 angularjs 控制器

appEIS.factory('familyMgmtService', function ($http,$rootScope) {
    famMgmtObj = {};

    famMgmtObj.getAll = function () {
        var Fams;        

        Fams = $http({ method: 'Get', url:$rootScope.ServiceUrl+ 'FamilyUnit' }).
        then(function (response) {            
            return response.data;
        });

        return Fams;
    };

    famMgmtObj.createFamily = function (fam) {
        var Fam;

        Fam = $http({ method: 'Post', url:$rootScope.ServiceUrl+ 'Family', data: fam }).
        then(function (response) {

            return response.data;

        }, function(error) {
            return error.data;
        });

        return Fam;
    };

    famMgmtObj.deleteFamilyById = function (eid) {
        var Fams;

        Fams = $http({ method: 'Delete', url:$rootScope.ServiceUrl+ 'FamilyUnit', params: { id: eid } }).
        then(function (response) {
            return response.data;

        });

        return Fams;
    };

    famMgmtObj.getFamilyByFuId = function (fid) {
        var Fams;
        console.log(fid);
        Fams = $http({ method: 'Get', url: $rootScope.ServiceUrl + 'Family', params: { id: fid } }).
        then(function (response) {            
            return response.data;
        });

        return Fams;
    };

    return famMgmtObj;
});

appEIS.controller('familyMgmtController', function ($scope, familyMgmtService, utilityService, $window) {

    $scope.Sort = function (col) {
        $scope.key = col;
        $scope.AscOrDesc = !$scope.AscOrDesc;
    };

    familyMgmtService.getAll().then(function (result) {
        $scope.Fams = result;
        console.log(result);
    });

    $scope.CreateFamily = function (Fam, IsValid) {
        if (IsValid) {
            $scope.Fam.Password = utilityService.randomPassword();

            familyMgmtService.createFamily(Fam).then(function (result) {
                if (result.ModelState == null) {
                    $scope.Msg = " You have successfully created " + result.FamilyId;
                    $scope.Flg = true;
                    utilityService.myAlert();

                    $scope.serverErrorMsgs = "";

                    familyMgmtService.getAll().then(function (result) {
                        $scope.Fams = result;
                    });
                }
                else {
                    $scope.serverErrorMsgs = result.ModelState;
                }
            });
        }
    };

    $scope.DeleteFamilyById = function (Fam) {
        if ($window.confirm("Do you want to delete Family with Id:" + Fam.FamilyId + "?")) {
            familyMgmtService.deleteFamilyById(Fam.FamilyId).then(function (result) {
                if (result.ModelState == null) {
                    $scope.Msg = " You have successfully deleted " + result.FamilyId;
                    $scope.Flg = true;
                    utilityService.myAlert();

                    familyMgmtService.getAll().then(function (result) {
                        $scope.Fams = result;
                    });
                }
                else {
                    $scope.serverErrorMsgs = result.ModelState;
                }
            });
        }
    };

    $scope.GetFamilyByFuId = function (Fam) {
        familyMgmtService.getFamilyByFuId(Fam.fid).then(function (result) {            
            console.log(result);
            $scope.Fams = result;

        });
    };


    $scope.CreateMultiFamily = function () {
        var file = $scope.myFile;
        var uploadUrl = "http://localhost:60736/api/Upload/";
        utilityService.uploadFile(file, uploadUrl, $scope.eid).then(function (result) {
            $scope.image = result;
        });
    };
});

家庭单位在手风琴列表中显示良好，但各种家庭没有使用 familyUnit Id 显示，如下所示：

<div class="panel-body">
    <div dir-paginate="emp in Fams | filter:search | orderBy:key:AscOrDesc | itemsPerPage:10" class="wrapper center-block">
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="heading{{emp.Id}}">
                    <h4 class="panel-title">
                        <div role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{emp.Id}}" aria-expanded="true" aria-controls="collapse{{emp.Id}}">
                            {{emp.FamilyUnitName}}
                        </div>
                    </h4>
                </div>
                <div id="collapse{{emp.Id}}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading{{emp.Id}}">
                    <div class="panel-body">
                        <div ng-repeat="f in emp.Families">{{f.FirstName}} - {{f.Surname}}</div>

                    </div>
                </div>
            </div>
        </div>
    </div>

标签： angularjsentity-frameworkasp.net-web-api2

解决方案

根据评论中的讨论，这个问题看起来像是数据问题，而不是前端问题（还）。

您需要在Get(int id)方法中获取 FamilyUnit 时加载 Families 详细信息。有两种方法可以进行早期加载。

Include与一起使用Linq，例如：

 var familyUnit = familyUnitObjBs.FamilyUnits 
                                 .Include(fu => fu.Families)
                                 .Where (fu +. fu.Id == Id)
                                 .ToList();

第二个选项可能是通过virtual从数据结构中删除来使用早期加载，如果您计划添加更多方法或者如果您有要覆盖的测试用例，这可能是一个问题，它仍然看起来像：

[Table("FamilyUnit")]
public partial class FamilyUnit
{       
public int Id { get; set; }
[Column(TypeName = "varchar")]
[StringLength(50)]
[Required]
public string FamilyUnitName { get; set; }
public IEnumerable<Family> Families { get; set; }
}

您可以在以下位置找到有关延迟加载和提前加载的更多详细信息： https ://msdn.microsoft.com/en-us/library/jj574232(v=vs.113).aspx

编辑： 1. 您可以使用强类型而不是 var for familyUnit：

List<FamilityUnit> familyUnit= familyUnitObjBs.FamilyUnits 
                             .Include(fu => fu.Families)
                             .Where (fu +. fu.Id == Id)
                             .ToList();

如果您需要整个列表，请获取列表而不是 FirstOrDefault()：
```
return db.Familiies.Where(x => x.FuID == id).ToList();
```

angularjs - 如何从angularjs中的父元素获取子元素的值

问题描述

解决方案

推荐阅读