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

Stack Overflow用户

提问于 2018-07-03 07:19:59

回答 1查看 158关注 0票数 0

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

[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表I：

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

angularjs

entity-framework

asp.net-web-api2

回答 1

Stack Overflow用户

发布于 2018-07-03 08:26:59

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

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

将Include与Linq结合使用，例如：

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

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

表(“FamilyUnit”)公共分部类FamilyUnit{ public int Id { get；set；}列(TypeName= "varchar")需要公共字符串FamilyUnitName { get；set；}公共IEnumerable家族{ get；set；} }

有关延迟加载和早期加载的更多详细信息，请访问：https://msdn.microsoft.com/en-us/library/jj574232(v=vs.113).aspx

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

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

如果需要整个列表，则返回列表而不是FirstOrDefault()：

(x => x.FuID == return

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51144771

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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