Question

我有布局页面，在布局中渲染一个HTML页面，在该HTML页面中包含下拉按钮显示学生名列表。我的代码是

var MainCtrl;

MainCtrl = [
  '$scope', '$state', '$stateParams', 'dataFactory', 'cacheKeys', '$rootScope', '$window', '$document', "$q", function ($scope, $state, $stateParams, dataFactory, cacheKeys, $rootScope, $window, $document, $q) {
      "use strict";
     
      $scope.isLoad = false;
      $scope.students = [];
      $scope.currentAppId = null;

      $scope.loadStudents = function () {
          var deferred = $q.defer();
          dataFactory.get("Student/All")
                 .then(function (result) {
                     $scope.students = result.data.data;
                     $scope.currentStudentName = $scope.students[0].name;
                     deferred.resolve($scope.students);
                     if ($scope.students.length === 0) {
                         $window.location.href = '/Account/WelCome';
                     }
                     else {
                         $scope.isLoad = true;
                     }

                 });
          return deferred.promise;
      };

  

      $scope.loadStudents();
  }
];


var AppSettingCtrl;

AppSettingCtrl = [
  '$scope', '$state', '$stateParams', function ($scope, $state, $stateParams) {
      "use strict";
      if (!_.isEmpty($stateParams.stdId))
      {
          $scope.selectedStudentData = _.findWhere($scope.students, { "id": $stateParams.stdId });
          $scope.currentStudentName = $scope.selectedStudentData.name;
      }

      $scope.currentStudentId = $stateParams.stdId;
    

      if (_.isEmpty($scope.currentStudentId) && $scope.students.length > 0)
      {
          $scope.appTabs.closeCurrentTab();
          $state.go($state.current.name, { appId: $scope.students[0].id });
      }
      


      $scope.gotoApp = function (stdId) {
          if (_.isEmpty(stdId)) {
              return;
          }
          $state.go($state.current.name, {stdId: stdId});
      };
  }
];


app.controller('AppSettingCtrl', AppSettingCtrl);

app.controller('MainCtrl', MainCtrl);

<!DOCTYPE html>
<html ng-app="app">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>STUDENT</title>
</head>
<body ng-controller="BaseCtrl">
   
    <!-- Content Start-->
    <div ng-controller="ConstantCtrl">
    <div id="main-container" ng-controller="MainCtrl" class="container-fluid">
        <div ng-controller="AppSettingCtrl">
            @RenderPage("_TopNavBar.cshtml")
        </div>
   
        <!-- Left Bar Start-->
        <div id="left-bar" style="left: {{navButton.leftBarLeft}}">
            <div class="left_bG"></div>
            <!-- Toggle Btn Start-->
            <span>
                <a href="/Home/Dashboard" class="navbar-brand">
                    <img src="~/Content/images/logo.png" />
                </a>
            </span>
            <a id="anchor_btn" href="javascript:void(0)" ng-click="anchorClicked()" ng-class="navButton.class"></a>
            <!-- Toggle Btn End-->
            <!-- Sidebar Navigation Start-->
            @*@{Html.RenderPartial("_LeftNavigationPartial");}*@
            @RenderPage("_LeftNavigationPartial.cshtml")
        </div>
        <!-- Left Bar End-->
        <!-- Right Bar Start-->
        <div id="right-bar" style="margin-left: {{navButton.rightBarLeft}}">
            @*@{Html.RenderPartial("_RightBarPartial");}*@
            @RenderPage("_RightBarPartial.cshtml")
            @RenderBody()
        </div>
        <!-- Right Bar End-->
    </div>
</div>
    </div><!-- Content End-->

</body>

</html>

_TopNavBar.cshtml:-

<!-- Wrapper Start-->
<nav role="navigation" class="navbar navbar-default top-bar">
    

    <div  class="col-xs-5 col-sm-3 col-lg-5 mar0 pad0 pull-right">
        <div class="col-xs-12 col-sm-2 col-lg-8 itemsdropdown mar0 pull-right tabbg">
            <div class="btn-group student-panel">
                <div class="btn-group" dropdown is-open="status.isopen">
                    <p>Current Student</p>
                    <button type="button"  aria-expanded="false" class="btn btn-default dropdown-toggle" dropdown-toggle ng-disabled="disabled">
                        {{currentStudentName}} <span class="fa fa-angle-down"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu" ng-model="currentAppId">
                        <li ng-repeat="student in students" ng-click="gotoApp(student.id)"><a>{{student.name}}</a></li>
                    </ul>
                </div>

            </div>
        </div>

    </div>
    <button id="btnLogout" class="btn btn-primary btn-sm pull-right" onclick="location.href='@Url.Action("SignOff", "Account")'">Log Out</button>
    <section class="container-fluid header">
        <div class="navbar-header col-md-2 main-logo">
            <span>
                <a href="/Home/Dashboard" class="navbar-brand admin-logo">
                    <img src="~/Content/images/small-logo.png" alt="logo">
                </a>
            </span>
        </div>
    </section>
</nav>

<!-- Wrapper End-->

在上面的代码中，在布局中渲染topnavbar HTML，首先运行名为get studets list的应用程序主控制器，然后选择第一个指定给scope.currentStudentName的学生名。下一个用户单击下拉按钮并选择一个学生控件转到appsetting控制器getv学生名称并绑定到范围变量，但该名称不显示在下拉列表中。现在我想使用AngularJS在下拉列表中显示所选名称。

Answer 1

对此做了一些修改后，最终我得到了解决方案

将gotoApp函数从AppSettingCtrl移动到MainCtrl Like MainCtrl： -

$scope.gotoApp = function (stdId) {
      if (_.isEmpty(stdId)) {
          return;
      }
      if (!_.isEmpty(stdId)) {
          $scope.selectedStudentData = _.findWhere($scope.students, { "id": stdId });
          $scope.currentStudentName = $scope.selectedStudentData.name;
          $state.go($state.current.name, { stdId: stdId });
      }
  };

如何使用AngularJS在布局中的下拉按钮上显示所选项目？

1 个答案: