angular 1.5
I'm creating a menu that on ng-click= i am getting the variable and than on ng-class setting that variable to true for the menu and the content.
Goal is on click to add/remove an active class to the parent and to the content div.
can't get my head around this one
<div ng-controller="myCtrl">
<ul>
<li class="animate" ng-class="{activelist: fonts ==!hidden }">
<a ng-click="activeMenu('fonts')" class="nav-icon">
menu font
</a>
</li>
<li class="animate" ng-class="{activelist: edit ==!hidden }">
<a ng-click="activeMenu('edit')" class="nav-icon">
menu edit
</a>
</li>
<ul>
<div class="">
<div class="fonttext" ng-class="{activelist: fonts ==!hidden }"></div>
<div class="edittext" ng-class="{activelist: edit ==!hidden }" ></div>
</div>
</div>
<script>
var myapp = angular.module('app', []);
myapp.controller('myCtrl', function($scope){
$scope.activeMenu = function (menuvar){
//getting the variable that gets passed via func
$scope.variable = menuvar;
// set the variable to be true no working
$scope.menuvar = true;
}
});
</script>
You can set a variable directly in ng-click to true. This variable can then be used in ng-class to dynamically add or remove classes. Here is an example:
<li class="animate" ng-class="{'activelist': fonts }">
<a ng-click="fonts = !fonts" class="nav-icon"></a>
</li>
<li class="animate" ng-class="{'activelist': edit }">
<a ng-click="edit = !edit" class="nav-icon"></a>
</li>
You can also set the variable in the controller:
HTML:
<li class="animate" ng-class="{'activelist': menu.fonts }">
<a ng-click="switchMenu('fonts')" class="nav-icon"></a>
</li>
<li class="animate" ng-class="{'activelist': menu.edit }">
<a ng-click="switchMenu('edit')" class="nav-icon"></a>
</li>
Controller:
$scope.menu = {};
$scope.switchMenu = function(selectedMenu) {
$scope.menu[selectedMenu] = !$scope.menu[selectedMenu];
};
Related
How can I get the selected value from below dropdown.?
<ul class="nav-drop-menu" id="ddlHotelSort">
<li class="liselect" value="{{ssort.Sort}}" ng-repeat="ssort in vm.searchsort">
<a href="javascript:void(0)" class="SortClass" name="Sortclass" style="left:0px" value="{{ssort.Sort}}">{{ssort.Name}}
</a>
</li>
</ul>
Below is image of dropdown opening..
How can I handle event and model value in angular application..?
<ul class="nav-drop-menu" id="ddlHotelSort">
<li class="liselect" ng-click="getSelectedItem(ssort);" value="{{ssort.Sort}}" ng-repeat="ssort in vm.searchsort">
<a href="javascript:void(0)" class="SortClass" name="Sortclass" style="left:0px" value="{{ssort.Sort}}">{{ssort.Name}}
</a>
</li>
</ul>
controller function
$scope.getSelectedItem = function(item){
console.log(item);//selected item
}
Just call a function in the li click, here is an example with your options.
Just click on each li,
var app=angular.module('myApp',[])
app.controller('MyCtrl',MyCtrl)
function MyCtrl($scope) {
$scope.opts = ["Recommended","FirstClass","SecondClass","ThirdClass" ];
$scope.my_method = function(opt)
{
alert(opt)
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
<ul>
<li ng-repeat=" opt in opts" ng-click="my_method(opt)">
{{ opt }}
</li>
</ul>
<p>{{opt}}</p>
</div>
Run the code snippet and click on each li
HEre is an example fiddle with your options
I'm new to Angular but enjoying getting to know it! I'm having no problem populating data but I'm stuck on this navigational problem.
I have a sidebar divided into two navigation s. Both are reading from nested JSON of 'areas' and 'reports'. The idea is that the currently selected/clicked item in the left hand list will populate the elements in the right hand list, according to its children in the JSON.
I've got the initial population working fine. It reads the 'areas' and assigns the active area, which displays the reports. I then have a directive which applies css classes on the click event, but how can I get it to also alter the active area?
I'm currently doing scope.activeArea = scope.areas[1];, but this does not work. The index is just there for development; that will be replaced by the index of the clicked element.
My HTML:
<div id="reports-subnav" ng-controller="reportAreasController">
<ul class="subnav-areas" >
<li ng-repeat="x in areas">
<a class="subnav-area-button" href="#" my-cool-directive>
<i class="{{ x.iconClass }}"></i>
</a>
</li>
</ul>
<ul id="nav-subsection" class="subnav-reports">
<li ng-repeat="r in activeArea.reports" id="{{ r.action }}" role="presentation"><span class="{{ r.iconClass }}"></span> {{ r.name }}</li>
</ul>
</div>
And Javascript:
var app = angular.module("focalWeb", []);
app.controller("reportAreasController", ['$scope','$http', function($scope, $http) {
$http.get('<?php echo SITE_ADDR; ?>/data/reportAreas.json').success (function(data){
$scope.areas = data.areas;
$scope.activeArea = $scope.areas[0];
});
}] );
app.directive("myCoolDirective", function() {
return {
restrict: "A",
link: function(scope, elem, attrs) {
$(elem).click(function() {
//var target = $(elem).next(".panel-collapse");
//target.hasClass("collapse") ? target.collapse("show") : target.collapse("hide");
$('.subnav-areas li').removeClass('active');
$(this).parent().addClass('active');
scope.activeArea = scope.areas[1];
});
}
}
});
Thanks!
Edit
Thanks to charlietfl's guidance my code now looks like this:
HTML
<div id="reports-subnav" ng-controller="reportAreasController">
<ul class="subnav-areas" >
<li class="subnav-area" ng-repeat="x in areas">
<a class="subnav-area-button" href="#" ng-click="showReports($event, x.id)">
<i class="{{ x.iconClass }}"></i>
</a>
</li>
</ul>
<ul id="nav-subsection" class="subnav-reports">
<li ng-repeat="r in activeArea.reports" id="{{ r.action }}" role="presentation"><span class="{{ r.iconClass }}"></span> {{ r.name }}</li>
</ul>
</div>
JS
var app = angular.module("focalWeb", []);
app.controller("reportAreasController", ['$scope','$http', function($scope, $http) {
$http.get('<?php echo SITE_ADDR; ?>/data/reportAreas.json').success (function(data){
$scope.areas = data.areas;
$scope.activeArea = $scope.areas[0];
$scope.showReports = function($event, index) {
$scope.activeArea = $scope.areas[index -1];
var theLi = angular.element($event.currentTarget).parent();
theLi.parent().find('li').removeClass('active');
theLi.addClass('active');
}
});
}] );
Edit 2
HTML
<div id="reports-subnav" ng-controller="reportAreasController">
<ul class="subnav-areas" >
<li class="subnav-area" ng-repeat="x in areas" ng-class="{active: x==activeArea}">
<a class="subnav-area-button" href="#" ng-click="showReports($event, x)">
<i class="{{ x.iconClass }}"></i>
</a>
</li>
</ul>
<ul id="nav-subsection" class="subnav-reports">
<li ng-repeat="r in activeArea.reports" id="{{ r.action }}" role="presentation"><span class="{{ r.iconClass }}"></span> {{ r.name }}</li>
</ul>
</div>
JS
var app = angular.module("focalWeb", []);
app.controller("reportAreasController", ['$scope','$http', function($scope, $http) {
$http.get('<?php echo SITE_ADDR; ?>/data/reportAreas.json').success (function(data){
$scope.areas = data.areas;
$scope.activeArea = $scope.areas[0];
$scope.showReports = function($event, item) {
$scope.activeArea = item;
}
});
}] );
Thanks again charlietfl!
I wanna see a div when I put the mouse over an image and remove it if I leave the mouse, with the ng-mouseenter and ng-mouseleave. But when I load my page, in the div appear class="ng-hide".
My code:
<nav class="navbar-default navbar-side" role="navigation" ng-app="panel" ng-controller="panelController">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li class="text-center">
<img ng-mouseenter="inProfile()" ng-mouseleave="outProfile()" src="{{ asset('image/id1.jpg') }}" class="user-image img-responsive"/>
<div ng-show="panelController.evento">
Hi!!
</div>
</li>
<li>
<i class="fa fa-dashboard fa-3x"></i><span class="text-20">Dashboard</span></a>
</li>
<li>
<i class="fa fa-users fa-3x"></i><span class="text-20">Usuarios</span>
</li>
<li>
<i class="fa fa-lightbulb-o fa-3x padding-left-10"></i><span class="text-20 padding-left-10">Emprendedores</span></a>
</li>
<li>
<i class="fa fa-money fa-3x"></i><span class="text-20">Inversores</span></a>
</li>
<li>
<i class="fa fa-newspaper-o fa-3x"></i><span class="text-20">Noticias</span></a>
</li>
</ul>
</div>
</nav>
<script>
var tfc = angular.module('panel', []);
tfc.controller ( 'panelController' , [ '$scope' , function($scope){
$scope.inProfile = function(){
$scope.evento = "true";
}
$scope.outProfile = function(){
$scope.evento = "false";
}
}])
</script>
You problem is on page load eventto value is undefined that's why ng-show expression is hiding value on page load. you should define evento value to true to show it. You could this do from controller or also you could use ng-init="panelController.evento=true" on view
And make sure, you should use boolean rather than string which is used for expression evaluation in ng-show.
Code
var tfc = angular.module('panel', []);
tfc.controller('panelController', ['$scope', function($scope) {
$scope.inProfile = function() {
$scope.evento = true;
}
$scope.outProfile = function() {
$scope.evento = false;
}
//init values
$scope.evento = true;
}]);
Update
You should directly access value of scope variable on view as you are not using controllerAs in you application, it should be evento instead of panelController.evento
Markup
<div ng-show="evento">
Hi!!
</div>
I have a list of items ("locals" array) which I show in a list
<ul class="list-group">
<li ng-repeat="loc in locals" class="list-group-item"><a href="" data-id={{loc.ID}}>{{loc.location}}</a>
</li>
</ul>
I want the user to be able to select an item, and then to use this item in code.
What is the preferred way to do it.
Also I am creating the application for mobile, so I should be able to know that the user chose this item in mobile( and not just use mouseclick for example).
You can make use of angular js ng-click event (on the li item where ng-repeat is and do something like this: fiddle
code snippet of controller:
function MyCtrl($scope) {
$scope.templateList = [{id:1, name: 'Template1'}, {id:2, name: 'Another Template'}]
$scope.template = {};
$scope.setValue = function(list) {
$scope.template.template_id = list.id;
$scope.template.template_name = list.name;
}
}
Of HTML:
<div ng-app>
<form ng-controller="MyCtrl">
<input type="hidden" name="template_id" ng-model="template.template_id" />
<input type="text" name="template_name" ng-model="template.template_name" />
<ul>
<li ng-repeat="list in templateList" ng-click="setValue(list)">{{list.name}}</li>
</ul>
</form>
</div>
Try this:
In html,
<ul class="list-group">
<li ng-repeat="loc in locals" class="list-group-item">
<a href="" data-id={{loc.ID}} ng-click="selectLoc(loc.location)">
{{loc.location}}
</a>
</li>
</ul>
In JS,
$scope.selectLoc = function(location){
console.log(location);
//Here you will get the selected location.
var SomeVar = location;
}
Hope this helps....
I am looking for a way to implement ng-repeat next-prevous navigation. Navigation is inside repeating area, so the navigation arrows are shown if next or previous items exists.
But I need a way to add an active class to repeater on ng-click, so if I navigate to next item, it receives active class (and same with previous), so i can make that item visible and all other hidden.
<li ng-class="{active: ?}" ng-repeat="page in pages">
<p ng-bind-html-unsafe="page.content"></p>
<a ng-show="pages[$index - 1]" ng-click="?" class="previous" href="#">Previous</a>
<a ng-show="pages[$index + 1]" ng-click="?" class="next" href="#">Next</a>
</li>
Also if there is another way around this, please advise.
HTML:
<div ng-controller="MyCtrl">
<li ng-class="{active: activePage.page == $index,
inactive: activePage.page != $index}" ng-repeat="page in pages">
<p ng-bind-html-unsafe="page.content"></p>
<a ng-show="pages[$index - 1]" ng-click="activePage.page = $index-1"
class="previous" href="#">Previous</a>
<a ng-show="pages[$index + 1]" ng-click="activePage.page = $index+1"
class="next" href="#">Next</a>
</li>
</div>
CSS:
.active{
display:block;
}
.inactive{
display:none;
}
JS:
function MyCtrl($scope, $rootScope) {
/* Dont use a primitive but an object as ng-repeat creates
a scope of its own */
$scope.activePage = {
page:0
};
$scope.pages = [{content:"a"},{content:"b"},{content:"c"}];
}