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
Related
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];
};
how can I get the title of the clicked list element? Unfortunately, the following snippet returns an 'undefined'
HTML
<ul class="nav nav-second-level collapse">
<li>
<span>Echocardiogram</span>
</li>
<li>
<span>Echocardiogram</span>
</li>
JS
$scope.menuClick = function(linkTitle) {
var linkText = angular.element(linkTitle).data('title');
console.log(linkText);
};
Here is a simple solution. First you should angularise your code by storing your menu items in a scope variable. You can then use ng-repeat to iterate through your items. You can store the corresponding title as well and then reference that title through your ng-click.
<div ng-controller="MyCtrl">
<ul class="nav nav-second-level collapse">
<li ng-repeat="item in listItems">
<a href="#" ng-attr-title="item.title" ng-click="getTitle(item.title)">
<span>{{ item.name }}</span>
</a>
</li>
</ul>
function MyCtrl($scope) {
$scope.listItems = [{
"name": "Echocardiogram",
"title": "Cardiology: Test 1"
}, {
"name": "Echocardiogram",
"title": "Cardiology: Test 2"
}];
$scope.getTitle = function (title) {
alert(title);
}
}
JSFiddle
You could use the click event. And reference the target element (<a>) and read it's title propery.
Html:
<a href="#" class="menuLink" ng-click="menuClick($event)" title="Cardiology: Test 1">
Controller :
$scope.menuLink =function (event){
var title = angular.element (event.target).attr ('title');
}
I have use toggle menu from simple toggle .but my problem that when we click on specific menu then all other menu should be close like as accordion menu.
Directive :
element.bind('click', function() {
var content = target.querySelector('.slideable_content');
if(!attrs.expanded) {
content.style.border = '1px solid rgba(0,0,0,0)';
var y = content.clientHeight;
content.style.border = 0;
target.style.height = y + 'px';
} else {
target.style.height = '0px';
}
attrs.expanded = !attrs.expanded;
});
when click on slide above code will execute.i need some logic like close all toggle which class name slidable_content
My Code is here : Plunker
#Michael is right, you can use the two way data binding to do that easily
<section>
<ul>
<li>
<span ng-click="isExpanded = ! isExpanded">Show 1</span>
</li>
<li ng-show="isExpanded" slider id="test2">
<p>Are to hide and show adf</p>
</li>
</ul>
</section>
So, you can control the state of the other menus if you want
UPDATE:
Try this:
<section>
<ul>
<li slider-toggle ng-click="expandItem = 1">Slider 1</li>
<li ng-if="expandItem == 1" slider id="test1">
<p>Are to hide and show</p>
</li>
<li slider-toggle ng-click="expandItem = 2">Slider 2</li>
<li ng-if="expandItem == 2" slider id="test2">
<p>Are to hide and show</p>
</li>
<li slider-toggle ng-click="expandItem = 3">Slider 3</li>
<li ng-if="expandItem == 3" slider id="test3">
<p>Are to hide and show</p>
</li>
<li slider-toggle ng-click="expandItem = 4">Slider 4</li>
<li ng-if="expandItem == 4" slider id="test4">
<p>Are to hide and show</p>
</li>
</ul>
</section>
In this way you can create an accordion menu, just getting the value of the element that you want to show and validating it with the ng-if directive (you can use ng-show if you want, you can find the difference here: docs.angularjs.org/api/ng/directive)
Note:
You shouldn't get elements of the DOM with jquery or javascript selectors, if you want to control an element of the DOM you can use a directive, as an example:
script.js:
.directive('someDirective',function(){
return{
restrict:'A',
scope:true,
templateUrl:'someTemplate.html',
link: function(scope, element, attrs){
console.log(element) //This will be your element
}
}
})
main.html:
<li some-directive ng-click="expandItem = 4">Slider 4</li>
UPDATE
If you want to close the current open item, you can control the open/close state with a function.
Try this:
main.html
<body ng-app="myApp">
<section ng-controller="myCtrl">
<ul>
<li slider-toggle ng-click="setCurrentItem(1)">Slider 1</li>
<li ng-show="currentItem == 1" slider id="test1">
<p>Are to hide and show</p>
</li>
<li slider-toggle ng-click="setCurrentItem(2)">Slider 2</li>
<li ng-show="currentItem == 2" slider id="test2">
<p>Are to hide and show</p>
</li>
<li slider-toggle ng-click="setCurrentItem(3)">Slider 3</li>
<li ng-show="currentItem == 3" slider id="test3">
<p>Are to hide and show</p>
</li>
<li slider-toggle ng-click="setCurrentItem(4)">Slider 4</li>
<li ng-show="currentItem == 4" slider id="test4">
<p>Are to hide and show</p>
</li>
</ul>
</section>
</body>
app.js
var myApp = angular.module('myApp', []);
myApp.controller("myCtrl", ["$scope", function ($scope) {
$scope.currentItem = null;
$scope.setCurrentItem = function (itemId) {
if(itemId == $scope.currentItem){
$scope.currentItem = null;
}else{
$scope.currentItem = itemId;
}
}
}])
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....