I have dropdown-toggle in page. I am using AngularJS. I want to open it automatically when page loads. Here is my code:
<div class="item dropdown customdrop" >
<a href="#" class="dropdown-toggle" >
<img src="img/bell.png"> <span class="toggle-username">Alerts <i class="fa fa-caret-down"></i></span>
</a>
<ul class="dropdown-menu dropdown-menu-left" >
<li class="dropdown-header">Notifications</li>
<li class="divider"></li>
<li>
<div> <span class="text-left ndata"> Notifications </span> <span class="text-right"> 5</span></div><br>
<div> <span class="text-left ndata"> Notifications </span> <span class="text-right"> 5</span></div><br>
<div> <span class="text-left ndata"> Notifications </span> <span class="text-right"> 5</span></div><br>
<div> <span class="text-left ndata"> Notifications </span> <span class="text-right"> 5</span></div><br>
<div> <span class="text-left ndata"> Notifications </span> <span class="text-right"> 5</span></div><br>
</li>
</ul>
</div>
You need to add the is-open option to the dropdown:
<div class="item dropdown customdrop" is-open="status.isopen">
And your controller should set it to be opened by default:
.controller('MyCtrl', function ($scope) {
$scope.status = {
isopen: true
};
});
Related
<div class="wrapper" id="body" ng-app="masterview" ng-controller="masterctrl" data-ng-init="getmenus()">
<header id="header">
<div class="header-width row">
<div class="col-xl-9">
<div class="logo float-xs-left">
<a href="#">
<img src="~/img/logo_accord.png" alt="Ace Report" />
</a>
</div>
</div>
<div class="col-xl-3 header-right">
<div class="header-inner-right">
<div class="float-default chat">
<div class="right-icon">
<a href="#">
<i class="fa fa-envelope-o"></i>
</a>
</div>
</div>
<div class="float-default chat">
<div class="right-icon">
<a href="#">
<i class="fa fa-comments-o"></i>
</a>
</div>
</div>
<div class="user-dropdown">
<div class="btn-group">
<a href="index.html#" class="user-header dropdown-toggle" data-toggle="dropdown"
data-animation="slideOutUp" aria-haspopup="true"
aria-expanded="false">
<img src="~/assets/images/user.jpg" alt="Profile image" />
</a>
<div class="dropdown-menu user drop-profile dropdown-card dropdown-card-profile animated flipInY">
#*
<header class="card-header d-flex">
<a href="javascript:void(0);" class="text-center">
<i class="fa fa-user"></i>
</a>
<a href="javascript:void(0);" class="text-center">
<i class="fa fa-cog"></i>
</a>
<a href="javascript:void(0);" class="text-center">
<i class="fa fa-power-off"></i>
</a>
</header>*#
<ul class="list-unstyled card-body">
#*
<li>
<a href="index.html#">
<span>
<span class="align-middle">Manage Accounts</span>
</span>
</a>
</li>*#
<li>
<a href="index.html#">
<span>
<span class="align-middle">Change Password</span>
</span>
</a>
</li>
#*
<li>
<a href="index.html#">
<span>
<span class="align-middle">Check Inbox</span>
</span>
</a>
</li>*#
<li>
<a href="#Url.Action("Logout", "Admin")">
<span>
<span class="align-middle">Sign Out</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--top menu bar-->
<div id="header-icon" class="" >
<div class="header-width">
<div class="col-xl-12">
<div class="menucontainer">
<div class="overlapblackbg"></div>
<a id="navtoggle" class="animated-arrow">
<span></span>
</a>
<nav id="nav" class="topmenu" role="navigation">
<div class="sidebar-search">
<div class="logo float-xs-left">
</div>
<a href="javascript:void(0)">
<i class="search-close icon_search"></i>
</a>
</div>
<!--left menu-->
<ul id="dvMenuInner" class="nav navbar-nav">
<li ng-repeat="parent in menu" class="dropdown">
<a href="/{{parent.url}}/{{parent.actionname}}" ng-show="!parent.children">
<span class="fa fa-tachometer header-icon" aria-hidden="true"></span>{{parent.menuname}}
</a>
<a href="/{{parent.url}}/{{parent.actionname}}" ng-show="parent.children" class="dropdown-toggle" data-toggle="dropdown">
<span class="fa fa-tachometer header-icon" aria-hidden="true"></span>{{parent.menuname}}
</a>
<ul class="dropdown-menu" ng-show="parent.children">
<li ng-repeat="child in parent.children" ng-show="!child.childrencc">
{{child.menuname}}
</li>
<li class="dropdown-submenu" ng-repeat="child in parent.children" ng-show="child.childrencc">
{{child.menuname}}
{{child.menuname}}
<ul class="dropdown-menu" ng-show="child.childrencc">
<li ng-repeat="children in child.childrencc">
{{children.menuname}}
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
<!-- END HEADER -->
<!-- START CONTENT -->
<section id="main" class="container-fluid">
<!-- START RIGHT CONTENT -->
#*
<div class="row">
<!-- START RIGHT CONTENT -->
<section id="content-wrapper" class="form-elements">
<!-- START PAGE TITLE -->
<div class="site-content-title">
<h2 class="float-xs-left content-title-main">Client Dashboard</h2>
<!-- START BREADCRUMB -->
<ol class="breadcrumb float-xs-right">
<li class="breadcrumb-item">
<span class="fa fa-home" aria-hidden="true"></span>
Home
</li>
<li class="breadcrumb-item active">Dashboard</li>
</ol>
<!-- END BREADCRUMB -->
</div>
<!-- END PAGE TITLE -->
</section>
</div>*#
#*
<div class="contain-inner"></div>*#
<ng-view> #RenderBody()</ng-view>
</section>
#*
</div>
I want menus to be loaded at the start of the application and I have multiple pages in MVC, so the problem is getting the error stated that controller not registered. so can you tell me how can I handle ng-app and ng-controller in master page and pages?
I am loading menus as follows:
app.controller('masterctrl', function ($scope, $http, $window) {
$scope.getmenus = function () {
var holding_url = encodeURI(APIURL + "getmenus");
$http.get(holding_url)
.then(function (response) {
$scope.names = response.data.t1;
$scope.menu = [];
$scope.childrenmenu = [];
$scope.count = 0;
angular.forEach(response.data.t1, function (value, key) {
if (value.parentid == 0) {
$scope.menu.push(value);
}
});
angular.forEach(response.data.t1, function (value, key) {
if (value.parentid != 0) {
angular.forEach($scope.menu, function (value2, key2) {
if (value.parentid == value2.menuid) {
if (value2.children == undefined) {
value2.children = [];
value2.showChildren = false;
}
value2.children.push(value);
$scope.childrenmenu.push(value);
}
});
}
});
angular.forEach(response.data.t1, function (value, key) {
if (value.parentid != 0) {
angular.forEach($scope.childrenmenu, function (value3, key3) {
if (value.parentid == value3.menuid) {
if (value3.childrencc == undefined) {
value3.childrencc = [];
value3.showChildren = false;
}
value3.childrencc.push(value);
}
});
}
});
Please see image due to that error data in table is also not loading properly, because master page and pages controller can not work together.
you need to bootstrap them using angular.bootstrap()
first give id to the child div lets say App2
<div class="ibox float-e-margins" ng-app="childview" id="App2">
</div>
angular.bootstrap(document.getElementById("App2"), ['childview']);
this will allow Angular to run subsequent views to run on the dom
Why not this ?
<div class="wrapper" id="body" ng-app="masterview" >
<div ng-controller="masterctrl" data-ng-init="getmenus()">
<!-- rest of your code --->
</div>
</div>
In web app i am showing list of items using ng-repeat directive of angularjs. And on-click of each item am assigning a summary controller to the summary page (using ui-routing) and shows the result. Currently what happens if there is 10 list items showed using ng-repeat then 10 times summary controller is getting initialized on click of one item. Eventually which makes my app bit slow. Here is my ng-repeat code in html.
<div class="surveyList" ng-repeat="survey in allSurveys | filter:headerObj.search track by $index">
<span class="surveycheckbox" ng-click="toggleClass($event)"></span>
<div class="toogleSurvey row" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()" ng-click="surveyIdForQuota(survey.SurveyID)">
<div class="col-xs-5 col-sm-2 col-md-4 surveyitleElipse">{{survey.SurveyName}}</div>
<div class="col-xs-5 col-sm-2 col-md-1">
<span class="title_thumb">
<span class='fa fa-mobile-phone' ng-show="survey.Type=='App'" title="APP" my-Tooltip />
<span class='fa fa-envelope-o' ng-show="survey.Type=='SMS'" title="SMS" my-Tooltip />
<span class='fa fa-desktop' ng-show="survey.Type=='Web'" title="WEB" my-Tooltip/>
</span>
</div>
<div class="col-sm-3 col-md-2 hidden-xs">{{survey.Date | date:'dd/mm/yyyy'}}</div>
<div class="col-sm-2 col-md-2 hidden-xs SurveyLastChild">124</div>
<div class="hidden-xs surveyListTool" ng-show="hoverEdit">
<a class="editSurvey" title="edit"><i class="fa fa-pencil fa-2"></i></a>
<a class="deleteSurvey" ng-click="sendsurveyID(survey.SurveyID)" data-surveyID="{{survey.SurveyID}}" ><i class="fa fa-trash-o fa-2"></i></a>
<a class="cloneSurvey" ng-click="cloneSurvey(survey.SurveyID)" title="clone"><i class="fa fa-clone fa-2"></i></a>
<a class="menuSurvey" title="menu">
<i class="fa fa-circle fa-2"></i>
<i class="fa fa-circle fa-2"></i>
<i class="fa fa-circle fa-2"></i>
</a>
</div>
</div>
<!-- On click Of the list am showing this div box -->
<div class="surveyDetailsBox"> <!--This is the header section -->
<div class="surveyDetailHead">
<p class="surveyTitle">{{survey.SurveyName}}</p>
<div class="surveyDetailHeadTool" >
<a class="editSurvey" title="edit" ng-click="showEditSurveyForm(survey.SurveyID,$index);"><i class="fa fa-pencil fa-2"></i></a>
<a class="deleteSurvey hidden-xs" ng-click="sendsurveyID(survey.SurveyID)" ><i class="fa fa-trash-o fa-2"></i></a>
<a class="menuSurvey" title="menu">
<i class="fa fa-circle fa-2"></i>
<i class="fa fa-circle fa-2"></i>
<i class="fa fa-circle fa-2"></i>
</a>
<a class="hidden-xs" title="close"><i class="fa fa-angle-up fa-2"></i></a>
</div>
</div>
<!--This is the body section where summary and other modules are present -->
<div class="surveyDetailContent hidden-xs" ng-if="is_desktop">
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="col-xs-2 col-sm-2 col-md-2 leftMenu">
<div class="list-group">
<a ui-sref="survey.surveyList.details" class="list-group-item summary" ui-sref-active="active">Summary</a>
<a ui-sref="survey.surveyList.questionare" class="list-group-item " ui-sref-active="active">Questionaire Management</a>
<a ui-sref="survey.surveyList.sampleManagement" class="list-group-item " ui-sref-active="active">Sample Management</a>
<a ui-sref="survey.surveyList.quotaManagement" class="list-group-item " ui-sref-active="active">Quota Management</a>
<a ui-sref="survey.surveyList.scheduling" class="list-group-item " ui-sref-active="active">Scheduling</a>
<a ui-sref="survey.surveyList.notification" class="list-group-item " ui-sref-active="active">Notifications</a>
<a ui-sref="survey.surveyList.reports" class="list-group-item " ui-sref-active="active">Reports</a>
<a ui-sref="survey.surveyList.location" class="list-group-item " ui-sref-active="active">Geolocation</a>
</div>
</div>
<div class="col-xs-10 col-sm-10 col-md-10 rightContent" ui-view></div>
</div>
</div>
</div>
For each sub module like Summary, questionnare etc., one controller is associated.
On click of this list am showing the summary box and running the controller also.
Code for surveyIdForQuota() goes here
$scope.surveyIdForQuota = function(SurveyID){
$rootScope.quotaSurveyID = SurveyID;
$scope.exportViewDetails="";
$http.get(__env.apiUrl+"/UserSurvey/GetInvitationCount?surveyId="+$rootScope.surveysummaryID,{headers:{"Content-type":"application/json",'sessionID':$rootScope.token}}).
then(function(response){
console.log(response);
$scope.summaryDetails = response.data;
},function(error){console.log(error)})
};
ng-click should be add on the item of list
<div class="surveyList" ng-repeat="survey in allSurveys |filter:headerObj.search track by survey.SurveyID"> <div ng-
click="surveyIdForQuota(survey.SurveyID)">)">//rest code inside goes here</div></div>
Your first div is a parent div, but you wrote ng-click on the list. So if you click any place of the div. it will be call the method
I have a Json which m getting in $scope.notifications.
**Json**
0:{
$$hashKey: "object:31"
action: "wrote a comment"
creationDate: "2015-11-23 13:48:55.0"
post: Object
seen: true
user: Object
}
This Json has a key : seen which can be either true or false . I have to filter out those objects in ng-repeat whose key :seen is= false on clicking button unread notifications.
and then again clear the filter on clicking All Notifications button.
HTML
<div class="col-xs-12 col-sm-6 col-md-8">
<ul class="notifications-action-menu text-center">
<li>
<button type="button" class="btn btn-link btnUnreadFilter active" data-filter="all" id="btnShowAll">All Notifications</button>
</li>
<li>
<button type="button" class="btn btn-link btnUnreadFilter" data-filter="unread" id="btnShowOnlyUnread" ng-click="actions.unreadNotifications()">Unread Notifications</button>
</li>
<ul></ul>
</ul>
</div>
<div class="col-xs-12">
<div id="notificationsListWrapper" ng-repeat="notification in notifications" ng-hide="{{notification.seen == seen}}">
<div class="notification-item" ng-class="{'read' : notification.seen == true}">
<div class=" no-click-bind mark-as-read-btn">
<button type="button" class="no-click-bind" data-toggle="tooltip" data-placement="top" data-original-title="Mark as read" ng-click="actions.redirectToPost(notification.post.uuid, $index)">
<i class="fa fa-check"></i>
</button>
</div>
<div class="notification-body">
<div class="notification-details">
<a href="" class="doc-profile-img"><img class="" alt="{{notification.user.authorName}}" ng-src="{{(notification.user.thumbnailUrl) ? notification.user.thumbnailUrl :'/assets/images/avatars/avatar_100x100.png'}}">
</a>
<a>{{notification.user.authorName}}</a><span class="notification-action"> {{notification.action}}</span>
<a href="/news/abcd" class="notification-url no-click-bind">{{notification.post.title}}
</a>
<div class="notification-meta"><i class="fa notification-type-icon fa-calendar"></i> <small class="notification-datetime text-muted" title="Thursday, January 21, 2016 at 5:26 pm">Jan 21 2016</small>
</div>
<div class="notification-actions"></div>
</div>
</div>
<div ng-if="notification.post.featuredAttachmentUrl != '' " class="notification-url-img"><img alt="" ng-src="{{notification.post.featuredAttachmentUrl}}"></div>
</div>
</div>
Try something like:
ng-repeat="notification in notifications | filter:seenFilter"
where seenFilter is set to {seen:true}, {seen:false} or true by the controller. Example:
$scope.actions.unreadNotifications = function(){
$scope.seenFilter = {seen:false}
}
I have angular project My Requirement is : How to display data after update on my UI without refreshing, Data store in server i want it to display on Contact and Recent Tab immediately after Updating.
UI Bindings:
<li class="media contact-card">
<div class="media-left">
<a ui-sref=".viewClient({'clientId':client._id})">
<img class="media-object img-circle" src="https://placehold.it/42x42" alt="https://placehold.it/64x64">
<!--<div class="circle" ng-class="getRandomColorClass('Xipesh Gandhi')"><p>{{generateInitialChar('Dipesh Gandhi')}}</p></div>-->
</a>
</div>
<div class="media-body">
<div class="pull-left">
<h4 class="media-heading pull-left">{{client.firstName}} {{client.lastName}}</h4>
</div>
<div class="pull-right">
<a class="" ui-sref=".editClient({'clientId':client._id})"> <i class="glyphicon glyphicon-pencil" ></i></a>
<a class=""> <i class="glyphicon glyphicon-trash" ></i></a>
</div>
<div class="clearfix"></div>
<span>{{client.address}}</span>
<span>{{client.birthDate | date:'mediumDate'}}</span>
</div>
</li>
View :
<div class="tab-wrapper">
<tabset justified="true">
<tab heading="CONTACTS">
<div class="tab-content">
<div>
<div class="pull-right">
<a class="add-client-link" ui-sref=".client"> <i class="glyphicon glyphicon-plus" ></i> Add Contact </a>
</div>
<div class="clearfix"></div>
</div>
<div class="hr"></div>
<div class="scrollable-container">
<ul class="media-list">
<contact-card data-client="client" ng-repeat="client in clientList"></contact-card>
</ul>
</div>
</div>
</tab>
<tab heading="RECENT">
<div class="tab-content">
<div>
<div class="pull-right">
<a class="add-client-link" ui-sref=".client"> <i class="glyphicon glyphicon-plus" ></i> Create Meeting </a>
</div>
<div class="clearfix"></div>
</div>
<div class="hr"></div>
<div class="scrollable-container">
<ul class="media-list">
<contact-card data-client="client" ng-repeat="client in clientList"></contact-card>
</ul>
</div>
</div>
</tab>
</tabset>
</div>
Controller:
$scope.updateClientList = function(client, operation){
if(operations.ADD === operation){
//$scope.clientList.push({firstname: $scope.client.firstName, lastname: $scope.client.lastName});
//$scope.clientList.push(client);
$scope.clientList.push (client);
// $scope.clientList = [];
} else if(operations.EDIT === operation){
} else if(operations.DELETE === operation){
}
$state.go('meeting-home.viewClient', {'clientId':client._id});
};
Does anyone know how to do it?
Please comment $scope.clientList = []; in your code. it will work. Any how you are not mentioning UI binding details.
I'm creating a social network site using AngularJS with bootstrap, the site is almost done but dropdown does NOT work.
I have tried many solutions online but none of them seem to work.
"ui.router" and "ui.bootstrap" are in my app.js so that is not the problem
HTML:
<div role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
{{ settings.sitename }}
</div>
<div class="navbar-collapse collapse">
<form role="search" class="navbar-form navbar-right" ng-if="isSignupPage">
<div class="form-group">
{{ 'already_registered' | translate }}
</div>
<a class="btn btn-default" ui-sref="login">{{ 'login_action' | translate }}</a>
</form>
<form role="search" class="navbar-form navbar-right" ng-if="isLoginPage">
<div class="form-group">
{{ 'no_account_signup' | translate }}
</div>
<a class="btn btn-success" ui-sref="signup">{{ 'signup_action' | translate }}</a>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
I'm using angular 1.4.0
You forgot about dropdown directive. Angular bootstrap documentation says: Dropdown is a simple directive which will toggle a dropdown menu on click or programmatically.
<div class="btn-group" dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-primary" dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>
So related to your code.
<div role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
{{ settings.sitename }}
</div>
<div class="navbar-collapse collapse">
<div class="btn-group" dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-primary" dropdown-toggle ng-disabled="disabled">
Button dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">
<a href="#">
<form role="search" class="navbar-form navbar-right" ng-if="isSignupPage">
<div class="form-group">
{{ 'already_registered' | translate }}
</div>
<a class="btn btn-default" ui-sref="login">{{ 'login_action' | translate }}</a>
</form>
</a>
</li>
<li role="menuitem">
<a href="#">
<form role="search" class="navbar-form navbar-right" ng-if="isLoginPage">
<div class="form-group">
{{ 'no_account_signup' | translate }}
</div>
<a class="btn btn-success" ui-sref="signup">{{ 'signup_action' | translate }}</a>
</form>
</a>
</li>
</ul>
</div>
</div>
<!--/.nav-collapse -->
</div>
</div>