How to display selected item on dropdown button in layout by using AngularJS?

Question

I have layout page, in Layout render one HTML page, in that HTML page contains dropdown button display list of studentnames. My Code is

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

In the above code render topnavbar HTML in layout, first run the application main controller called get studets list and select first student name assign to scope.currentStudentName. Next user click the dropdown button and select one student control goes to appsetting controller getv student name and bind to scope variable but that name not display on dropdown. Now I want to display selected name in dropdown using AngularJS.

durga siva kishore mopuru · Accepted Answer · 2015-12-02 07:13:08Z

1

After doing some modifications on this, Eventually i got the solution

Move gotoApp function from AppSettingCtrl to 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 });
      }
  };

answered Dec 2, 2015 at 7:13

durga siva kishore mopuru

1,3576 gold badges34 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display selected item on dropdown button in layout by using AngularJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related