I've a simple menu where I would to apply the 'active' class to a clicked link.
Here's part of my menu:
<ul>
<li>
<a href="#/c/{{cId}}" ng-class='{"active":tog==1}' ng-click='tog=1'>{{c}}
</a>
</li>
<li>
<a href="#/a/{{a.aId}}" class="tree-toggle"
ng-class='{"active":tog==2}' ng-click='tog=2'>{{a.Name}}
</a>
</li>
</ul>
It's really simple structure as I said before, but when I click on first li "c" the class 'active' is set. Then when I click on the second li element the class 'active' is set also on that element and not removed from the first one and set only on the second.
Any suggestion?
Works for me as:
.active{
font-size: 14pt;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ul ng-app>
<li><a href="#" ng-class='{"active":tog==1}' ng-click='tog=1'>Click-Me {{tog}}</a></li>
<li><a href="#" ng-class='{"active":tog==2}' ng-click='tog=2'>Click-Me {{tog}}</a></li>
</ul>
Here's a solution:
Hope it works for you....
(function() {
'use strict';
angular.module('App', [])
.controller('InputCtrl', ['$scope',
function($scope) {
$scope.cId = 1;
$scope.c = 'some text';
$scope.a = {};
$scope.a.Name = 'some text in a';
}
]);
}());
.active{
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div ng-app="App" ng-controller="InputCtrl">
<ul>
<li>
<a ng-href="" ng-class='{"active":tog==1}' ng-click='tog=1'>{{c}}
</a>
</li>
<li>
<a href="" class="tree-toggle" ng-class='{"active":tog==2}' ng-click='tog=2'>{{a.Name}}
</a>
</li>
</ul>
</div>
Related
I have three bookmarks, two are on same page and one in different page, when ever I click on the link, it moving to same element and it was't smooth.
The frame works I am using are materializecss, angularjs 1 and ui router
I don't know how to write the code for it.
myapp.controller('ctrl',ctrl);
ctrl.$inject=['$scope', '$location', '$anchorScroll'];
function ctrl($scope, $location, $anchorScroll) {
$scope.scrollTo = function(team) {
$location.hash('team');
$anchorScroll();
};
$scope.scrollTo = function(contact) {
$location.hash('contact');
$anchorScroll();
};
};
<body ng-controller="ctrl">
<div class="container">
<div class="fixed-action-btn toolbar">
<a class="btn-floating btn-large light-blue accent-2 pulse">
<i class="large material-icons">menu</i>
</a>
<ul>
<li class="waves-effect waves-light"><a ui-sref="home">HOME</a></li>
<li class="waves-effect waves-light"><a ng-click="scrollTo(home/project)">PROJECTS</a></li>
<li class="waves-effect waves-light"><a ng-click="scrollTo(team)">TEAM</a></li>
<li class="waves-effect waves-light"><a ng-click="scrollTo(contact)">CONTACT</a></li>
</ul>
</div>
</div>
Any help is appreciate.
Thank you.
You dont need to add multiple scrollTo function in controller, you can use only one function for all like this
myapp.controller('ctrl', ctrl);
ctrl.$inject = ['$scope', '$location', '$anchorScroll'];
function ctrl($scope, $location, $anchorScroll) {
$scope.scrollTo = function(state) {
$location.hash(state);
$anchorScroll();
}
};
And html is
<body ng-controller="ctrl">
<div class="container">
<div class="fixed-action-btn toolbar">
<a class="btn-floating btn-large light-blue accent-2 pulse"> <i class="large material-icons">menu</i> </a>
<ul>
<li class="waves-effect waves-light"><a ui-sref="home">HOME</a></li>
<li class="waves-effect waves-light"><a ng-click="scrollTo('home/project')">PROJECTS</a></li>
<li class="waves-effect waves-light"><a ng-click="scrollTo('team')">TEAM</a></li>
<li class="waves-effect waves-light"><a ng-click="scrollTo('contact')">CONTACT</a></li>
</ul>
</div>
</div>
</body>
I'm using ui-route ui-sref in my links with the navbar using UI-Bootstrap dropdowns and if I use the anchor tag with href, the dropdown closes on click, but the anchor tags with ui-sref does not close the dropdown. I've got the following plnkr with it showing the bug.
Angular Code
angular.module('app', ['ui.bootstrap', 'ui.router'])
.config(appRoute)
.controller('myController', myController);
appRoute.$inject = ['$stateProvider'];
function appRoute($stateProvider) {
$stateProvider.state('index', {
url: '/index',
template: '<h1>indexRoute</h1>'
})
.state('other', {
url: '/other',
template: '<h1>otherRoute</h1>'
})
}
function myController() {
var ctrl = this;
ctrl.title = 'Title';
ctrl.user = 'User#user.com';
ctrl.test = test;
ctrl.test2 = test2;
function test() {
console.log('TEST LINK!')
}
function test2() {
console.log('TEST 2')
}
}
HTML
<body ng-controller="myController as $ctrl" style="{padding-top: 70px;}">
<nav id="isec-menu" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<div class="intelisecure-header">
<span>{{$ctrl.title}}</span>
</div>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li id="usermenu" class="dropdown user-menu-dropdown" uib-dropdown="">
<a href="" class="uib-dropdown-toggle username" uib-dropdown-toggle="">
<i class="fa fa-user fa-fw"></i>
{{$ctrl.user}} <span class="caret"></span>
</a>
<ul class="dropdown-menu" uib-dropdown-menu="" role="menu">
<li role="menuitem">
<a href="/index" ng-click="$ctrl.test()">
<i class="fa fa-fw fa-sign-out menu-icon"></i>
<span class="menu-text">index href</span>
</a>
</li>
<li role="menuitem">
<a ui-sref="other" ng-click="$ctrl.test2()">
<i class="fa fa-fw fa-sign-out menu-icon"></i>
<span class="menu-text">other sref</span>
</a>
</li>
<li role="menuitem">
<a href="" ng-click="$ctrl.logout()">
<i class="fa fa-fw fa-sign-out menu-icon"></i>
<span class="menu-text">Logout</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<ui-view>
<div>
test
</div>
</ui-view>
</body>
Not perfectly built, I was trying to see if I could replicate the issue with my
https://plnkr.co/edit/Rz3AbgnYnWI34DjuByY6?p=preview
Apparently this was a known issue and was resolved by updating to UI-Router 1.0.0-beta.3
I have a website where i show different questions and when you click in one appear the answer and if you click again dissapear. And i trying to do it in
Angular but for the moment i can't achive it.
<ul id="question-list">
<li>
<h1><a ng-click="answer = !answer" >What is this?</a></h1>
<h3 ng-show="answer"> this</h3>
</li>
<li>
<h1 >What is the question?</h1>
<h3>It </h3>
</li>
<li>
<h1>What is the question?</h1>
<h3> Ipsum.</h3>
</li>
Angular Code
ehlApp.controller('faqController', function ($scope) {
$scope.answer = true;
});
The code you posted worked perfectly in a properly set up app, so I'm guessing that's the problem.
<div ng-app="app" ng-controller="ctrl">
<ul id="question-list">
<li>
<h1><a ng-click="answer = !answer">What is this?</a></h1>
<h3 ng-show="answer"> this</h3>
</li>
<li>
<h1>What is the question?</h1>
<h3>It </h3>
</li>
<li>
<h1>What is the question?</h1>
<h3> Ipsum.</h3>
</li>
</ul>
</div>
<script>
var app = angular.module('app',[]);
app.controller('ctrl', function ($scope) {
$scope.answer = true;
});
</script>
Each question have there own answers so to display the answer attached jsbin
HTML :
<div ng-app="myApp">
<div ng-controller="MyCtrl as vm">
<ul id="question-list" >
<li ng-repeat = "questionAns in vm.questionList">
<h1 ng-click="questionAns.showAnswer = !questionAns.showAnswer"> <a ng-bind="questionAns.question"></a></h1>
<h3 ng-show="questionAns.showAnswer" ng-bind="questionAns.answer"></h3>
</li>
</ul>
</div>
JAVASCRIPT :
var app = angular.module("myApp",[]);
app.controller("MyCtrl", ["$scope", function ($scope) {
var vm = this;
vm.questionList = [{
"question" : "What is this question 1?",
"answer" : "this is answer1"
},{
"question" : "What is this question 2?",
"answer" : "this is answer2"
}];
}]);
jsbin to show hide
You can do that all in the template, example:
<p ng-click="x=!x">Something<span ng-show="x"> else</span>.</p>
Clicking on the <p> will make the <span> show and disappear.
<div ng-app="app" ng-controller="control">
<ul id="question-list">
<li>
<h1><a ng-click="answer = !answer">What is this?</a></h1>
<h3 ng-show="answer"> this</h3>
</li>
,<li>
<h1 ng-click="answer = !answer">What is the question?</h1>
<h3 ng-show="answer">It </h3>
</li>
<li>
<h1 ng-click="answer = !answer">What is the question?</h1>
<h3 ng-show="answer"> Ipsum.</h3>
</li>
</ul>
</div>
<script>
var app = angular.module('app',[]);
app.controller('control', function ($scope) {
$scope.answer = true;
});
</script>
I have an application created with AngularJS which has a strip of menus. What I am trying to do is to create submenus with each menu. The submenus can be created by adding additional <ul> <li> ... </li> </ul> under my existing list items of menus. How can I do it?
This is my code with AngularJS calls:
<div id="menu">
<ul>
<li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
{{page.menuTitle}} {{page.subMenu}}
</li>
</ul>
</div>
This generates the following code in HTML with div of id=menu:
<ul>
<li class="ng-scope ng-binding selected" ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
<a class="ng-binding" href="" ng-click="goToPage($index)">Introduction</a>
</li>
<li class="ng-scope ng-binding" ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
<a class="ng-binding" href="" ng-click="goToPage($index)">Cases</a>
</li>
...
...
</ul>
AngularJS JS code
The Angular JS Code to compliment above HTML is:
data.title = 'Amanpour consult Petrochemicals & Energy';
data.pages = [];
data.pages[0] = {};
data.pages[0].menuTitle = 'Introduction';
data.pages[0].slides = [];
data.pages[0].slides[0] = {heading:'A Heading: profile', speaker: 'The man himself', title:'Expert in awesomeness', img:'showing-awesomeness.jpg', video:'witnessing-awesomeness.m4v'};
....
data.pages[0].slides[1]
....
data.pages[0].slides[2]
....
data.pages[0].slides[3]
Now to add the submenu, I thought may be I could following to AngularJS code:
data.pages[0].subMenu = '<ul> <li> First Link </li> <li> Second Link </li> </ul>';
and then call it in HTML like this (notice the {{page.subMenu}}):
<li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
{{page.menuTitle}} **{{page.subMenu}}**
</li>
But it doesn't work, all it gives me is the following, which just prints the HTML literally on the page:
<ul> <li> <a href="#">First Link</a> </li> <li> <a href="#">Second Link</a> </li> </ul>
Update
I'd have to create a menu within JS like this:
data.subMenu = [];
data.subMenu[0] = {};
data.subMenu[0].list = [];
data.subMenu[0].list[0] = 'Menu 1';
data.subMenu[0].list[1] = 'Menu 2';
data.subMenu[0].list[2] = 'Menu 3';
and would have to call it in my HTML like this:
<div id="menu">
<ul>
<li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
{{page.menuTitle}}
<ul>
<li ng-repeat="smenu in data.subMenu">
{{smenu.list[smenu]}}
</li>
</ul>
</li>
</ul>
</div>
The only problem is that I'd have to do the looping right; I am not able to make the index within the loop correctly.
I'm not quite sure if this is what you were looking for but take a look at this jsfiddle : http://jsfiddle.net/Marabyte/dxBe8/
In the HTML you have the structure for two nav, the main nav, the sub nav and respective ul/li
<section ng-app ng-controller="navCtrl">
<nav class="main">
<ul class="ul-nav">
<li class="li-nav li-main" ng-click="select($index)" ng-repeat="list in lists">{{list.name}}</li>
</ul>
</nav>
<nav class="sub" ng-show="subMenuShow">
<ul class="ul-nav ul-sec">
<li class="li-nav li-main" ng-repeat="sublist in sublists">{{sublist}}</li>
</ul>
</nav>
</section>
In your controller you have 2 lists for the main and sub nav.
function navCtrl($scope) {
$scope.lists = [{
name: "Cinema"
}, {
name: "TV Shows"
}, {
name: "Music"
}, {
name: "Awards"
}];
$scope.subMenu = [
["Snatch", "Rockrolla"],
["Sherlock", "Game of Thrones"],
["The National", "Johnny Cash", "Xutos & Pontapés"],
["Oscars", "Golden Globes", "Emmys", "BAFTA"]
];
$scope.select = function ($index) {
$scope.sublists = $scope.subMenu[$index];
$scope.subMenuShow = true;
};
}
The select() function is showing the subMenu based on the index of the main list.
Hope it helps!
Hugo
I've got an angularjs app with a nav bar inside my index.html page like that :
<div class="navbar navbar-inverse navbar-fixed-top" ng-controller="NavCtrl">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li>
Home
</li>
<li>
Add a contact
</li>
<li>
Users
</li>
<li>
Agencies
</li>
<li>
<a ng-click="intro()">Help</a>
</li>
</ul>
</div>
</div>
</div>
This div use a controller, and when i click on the help link it calls the intro method of my controller. But this method is called twice each time !!
This is my controller :
'use strict';
angular.module('myApp')
.controller('NavCtrl', function ($scope, $location) {
$scope.intro = function(){
if($location.path() != '/'){
toastr.warning("Warning.");
}else{
introJs().start();
}
}
});
Any idea ?..
This is the complete html :
<div class="navbar navbar-inverse navbar-fixed-top" ng-controller="NavCtrl">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li ng-class="navClass('')">
Home
</li>
<li ng-class="navClass('add')">
Add a contact
</li>
<li ng-class="navClass('users')">
Users
</li>
<li ng-class="navClass('agencies')">
Agencies
</li>
<li>
<a ng-click="intro()">Help</a>
</li>
</ul>
</div>
</div>
</div>
<div class="show-grid"></div>
<div class="container">
<div class="row" ng-view></div>
</div>
Resolved :
Someone (on my project) has added an angular.min script file ... We' have already the angular file for develoment ...
Two angular core library no conflict just methods called twice of course ...
Really my bad sorry guys thx for ur replies