CODEWITHSUNDEEP
angularjs
mm1975
mm1975

Reputation: 1655

Get Title of clicked menu-li

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>
        <a href="#" class="menuLink" ng-click="menuClick()" title="Cardiology: Test 1"><span>Echocardiogram</span></a>
    </li>
    <li>
        <a href="#" class="menuLink" ng-click="menuClick()" title="Cardiology: Test 2"><span>Echocardiogram</span></a>
    </li>

JS

$scope.menuClick = function(linkTitle) {
    var linkText = angular.element(linkTitle).data('title');
    console.log(linkText); 
};

Upvotes: 0

Views: 382

Answers (2)

TonalLynx
TonalLynx

Reputation: 376

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

Upvotes: 2

Michael
Michael

Reputation: 3104

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');
}

Upvotes: 0

Related Questions