Editor

Pregled code-a:

<!DOCTYPE HTML>
<html lang="hr">
<head>
<meta charset="UTF-8">
<title>AngularJS - ng-show</title>

</head>
<body ng-app="mojApp" ng-controller="MojCtrl">
Prelaskom miša preko stavke pojavit će se ispod dodatan opis.
<br><br>

<ol>
    <li ng-repeat="radnik in djelatnici" style="margin-top:10px;">
        <h3 ng-mouseenter="ent($event)" ng-mouseleave="lve()" id="{{$index+1}}" style="display:inline;color:blue;text-decoration:underline;cursor:pointer;">{{radnik.ime}}</h3>
        <span ng-show="vidljivost=={{$index+1}}" style="font:10px Verdana; color:Gray;margin-left:10px;">{{radnik.opis}}</span>
    </li>
</ol>

<script src="../angularjs/1.2.9/angular.min.js"></script>
<script>
    var mojModul = angular.module('mojApp', []);
    
    mojModul.controller('MojCtrl', function($scope){
        $scope.vidljivost = false;
        
        var radnici = [
            {ime: 'Pero' , opis: 'Student 3. godine prava, pripravnik. Rođen 1973. godine.'},
            {ime: 'Marica' , opis: 'Radi kao domaćica kod muža. Rođena 1992. godine.'},
            {ime: 'Đurica' , opis: 'Đurica je VSS lopov i radi u KRADEZEu. Rođen 1956. godine.'}
        ];
        
        $scope.djelatnici = radnici;
        
        $scope.ent = function(ev){
            $scope.vidljivost = ev.toElement.id;
            
            //ev.toElement.id daje id od H1 taga
            //console.log(ev.toElement.id);
        }
        
        $scope.lve = function(){
            $scope.vidljivost = false;
        }
        
    });
</script>

</body>
</html>

Pregled stranice:

Pogledaj stranicu ../javascript/angularjs/primjeri/19ng-show_ng-repeat.html.