Service Portal: hide/show HTML elements, access them in client controller

1) using ng-hide


 <div id="mi-open-tickets" ng-model = "c.openList" ng-hide="{{}}">OPEN TICKETS


function($scope) { /* widget controller */ var c = this; = false;//--show = true;//--hide

advantage: works great onload


doesnt appear possible to hide/show dynamically

2) using display:none/block approach -  no ng-hide


<div class="mi-openclosed"> <div class="mi-padded"> <div class="mi-center"> <button class="btn btn-default" ng-click="mi_showOpen()">Open Issues</button>&nbsp; <button class="btn btn-default" ng-click="mi_showClosed()">Closed Issues</button> </div> <div class="typea"> <widget id="typeahead-search" options=data.search_options></widget> </div> </div> </div> <div id="mi-open-tickets" ng-model = "c.openList" >OPEN TICKETS <div ng-repeat="openTicket in ::data.openIssuesList" > <span>{{openTicket.number}} ; {{openTicket.short_description}}</span> </div> </div> <div id="mi-closed-tickets" ng-model = "c.closedList">CLOSED TICKETS <div ng-repeat="closedTicket in ::data.closedIssuesList" > <span>{{closedTicket.number}} ; {{closedTicket.short_description}}</span> </div> </div>

client script:

$scope.mi_showOpen = function() { // = false; // = true; document.getElementById("mi-closed-tickets").style.display="none"; document.getElementById("mi-open-tickets").style.display="block"; } $scope.mi_showClosed = function() { // = true; // = false; document.getElementById("mi-closed-tickets").style.display="block"; document.getElementById("mi-open-tickets").style.display="none"; }


Popular posts from this blog

GlideRecord setValue

Running transform maps asynchronously

Post a command to the ECC queue for the mid server to initiate a powershell file copy