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');
}
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
Angular.js is pretty new to me. I have learned before the $scope method for the controller and now trying the "this" method. For some reason I can not get my ng-repeat to work. here's my code:
HTML:
<ul class="nav nav-pills">
<li><a ng-click="myCtrl.tab=1" href>one</a></li>
<li><a ng-click="myCtrl.tab=2" href>two</a></li>
<li><a ng-click="myCtrl.tab=3" href>three</a></li>
</ul>
<div ng-controller="imageContr as imageCtrl">
<div ng-show="myCtrl.tab === 1" class="tab">
<h3>ONE title</h3>
<p>hello</p>
<li ng-repeat="item in gallery">
<img alt="imagealt" ng-src="{{item.photo}}">
</li>
</div>
<div ng-show="myCtrl.tab === 2" class="tab">
<h3>TWO title</h3>
<p>how are</p>
</div>
<div ng-show="myCtrl.tab === 3" class="tab">
<h3>THREE title</h3>
<p>you?</p>
</div>
</div>
</section>
</body>
</html>
APP.JS:
(function() {
var app = angular.module('myApp', []);
app.controller('myController', function() {
this.tab = 1;
});
app.controller('imageContr', function() {
this.gallery = images;
var images = {
photo: 'image1.jpg'
};
});
})();
Declare images before you assign it, and make it an array
var images = [{ photo: 'image1.jpg' }];
this.gallery = images;
Then in your view:
<li ng-repeat="item in imageCtrl.gallery">
<img alt="imagealt" ng-src="{{item.photo}}">
</li>
You are storing the gallery on this of the controller (which is basically the $scope), hence you need to access it in the template via imageContr as well:
<li ng-repeat="item in imageCtrl.gallery">
<img alt="imagealt" ng-src="{{item.photo}}">
</li>
You could also consider making gallery an array, so can easily iterate over it. Or you need to use the "iterate over object properties"-syntax:
<div ng-repeat="(key, value) in myObj"> ... </div>
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;
}
}
}])
So I ma trying to loop through an array and create an list item for each object in it.
However when then adding an ng-click to that item i get the following error, even though the code prints out correctly.
Syntax Error: Token '$index' is unexpected, expecting [:]
I have the following code:
<body ng-controller="VideoController as VidCtrl">
<div class="row" id="grid">
<div ng-repeat="array in videos" ng-show="VidCtrl.isActive({{$index}})">
<ul class="small-block-grid-3">
<li ng-repeat="video in array" ng-click="VidCtrl.setVideo({{$index}})">
<img src="{{video.image}}">
<div>
<h5>{{video.title}}</h5>
<p>{{video.ingress}}</p>
</div>
</li>
</ul>
</div>
<ul class="pagination">
<li ng-class="{'current':isActive($index)}" ng-repeat="array in videos"><a ng-click="VidCtrl.setPanel($index)" href="#">{{$index + 1}}</a></li>
</ul>
</div>
And This is my js:
var videos = [];
var activeVideo = null;
var app = angular.module('webb-tvApp', []);
app.controller('VideoController', function($scope){
$scope.videos = videos;
this.activePanel = 0;
this.setPanel = function(val){
this.activePanel = val;
}
this.isActive = function(val){
return this.activePanel === val;
}
this.setVideo = function(vidIndex){
console.log(videos[this.activePanel][vidIndex]);
}
});
The videos array has the following structure.
var videos = [
[
{
image: "foo",
title: "bar",
ingress: "foobar",
},
{},
{}
],
[
{},
{},
]
]
I am new to angular so go easy on me.
When using these directives you can use the variables without interpolation {{}}. Additionally, you can use ng-src with your images instead of using src.
<body ng-controller="VideoController as VidCtrl">
<div class="row" id="grid">
<div ng-repeat="array in videos" ng-show="VidCtrl.isActive($index)">
<ul class="small-block-grid-3">
<li ng-repeat="video in array" ng-click="VidCtrl.setVideo($index)">
<img ng-src="{{video.image}}">
<div>
<h5>{{video.title}}</h5>
<p>{{video.ingress}}</p>
</div>
</li>
</ul>
</div>
<ul class="pagination">
<li ng-class="{'current':isActive($index)}" ng-repeat="array in videos"><a ng-click="VidCtrl.setPanel($index)" href="#">{{$index + 1}}</a></li>
</ul>
</div>
Few things I noticed:
Remove interpolation from inside ng-show and ng-click
<div ... ng-show="VidCtrl.isActive($index)">
...
<li ... ng-click="VidCtrl.setVideo($index)">
And replace src with ng-src
<img ng-src="{{video.image}}">
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....