具有Angular的MVC下拉列表选择默认值

时间:2015-09-30 08:35:41

标签: angularjs asp.net-mvc

我是MVC和AngularJS的新手。 我有一个布局页面和布局页面局部视图,它具有下拉和渲染体。 在选择时,任何值内容的更改都将改变渲染体中的视图。 我正在使用MVC @Html.DropDownList因为我的数据列表在会话中。

现在我想更改有关使用Angular进行的下拉值更改的视图数据。

以下是我的部分视图代码。

@Html.DropDownList("LoanAccountTypeModels", new SelectList(((MyModel.UserDetailsModel)Session["UD"]).LoanAccountTypeModels), new { style = "height: 30px; width:250px;", ng_change = "UpdateChildViews()", ng_init="LoanAccountTypeModel = options[0]" , ng_model = "LoanAccountTypeModel" })

我的_Layout页面是

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="~/Scripts/angular.js"></script>
    @Styles.Render("~/Content/css")
    @Styles.Render("~/css/_Layout")
    @Scripts.Render("~/js/jquery.js")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/js/_Layout.js")
</head>
<body ng-app="ClientPortalGlobalNGApp">
    <div id="wrapper" ng-controller="ClientPortalGlobalNGController">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div> <a class="navbar-brand" href="index.html"><img src="../assets/img/axis_bank_logo.png" style="width:65%;"> </a></div>
            </div>
            @Html.Partial("_HeaderPartial")
        </nav>
    <h3>{{HomePageModel.TotalSanctionedAmt}}</h3>
    @RenderBody();
    </div>
</body>

我的_layout.js页面是

function ClientPortalGlobalNGController($scope, $http) {

    $scope.UpdateChildViews = function (ddlAccountType) {
        if ($scope.CurrentSelected == "Home") {
            $scope.HomePageModel = { TotalSanctionedAmt: "10", CustomerDetail: { PrimaryHolderName: "X" } };
        }
    }
}
var app = angular.module("ClientPortalGlobalNGApp", []);
app.controller("ClientPortalGlobalNGController", ClientPortalGlobalNGController); 

我在控制器中尝试了$scope.form = { type: $scope.typeOptions[0].value };然后选择了默认值,但它正在提供TypeError: Cannot read property '0' of undefined,然后角度代码无效,并在最终HTML中呈现为{{HomePageModel.TotalSanctionedAmt}}而不是空白值。

请建议。我已经在Stack溢出上徘徊了2天。但没有帮助。 另外请建议我最好的方法。

0 个答案:

没有答案