jquery - AngularJS ng-show function with some show/hide not working as it should -
im reaching out solution regarding small angularjs directive using ng-show have on application. have header 3 navigation icons. when click on each of them description of icon display user. works should until last icon wants show descriptions.
what wrong code? suggestions appreciated: link showing talking about: demos screencast here
javascript:
$scope.brandingtitletoggle = function () { var brandingtitle = $('li.nav-branding'); $(brandingtitle).on("click", function () { $scope.showfeestitle = false; $scope.showsettingstitle = false; $scope.showbrandingtitle = true; }); }; $scope.settingstitletoggle = function () { var editortitle = $('li.nav-editor'); $(editortitle).on("click", function () { $scope.showbrandingtitle = false; $scope.showfeestitle = false; $scope.showsettingstitle = true; }); }; $scope.feetitletoggle = function (index) { var feestitle = $('li.nav-fees'); $(feestitle).on("click", function (index) { $scope.showfeetitle = false; $scope.showbrandingtitle = false; $scope.showsettingstitle = false; }); };
html
<ul class="list-inline"> <li>what do?</li> <li ui-sref-active="active" class="nav-branding" data-toggle="tooltip" data-placement="bottom" tooltip="use tool customize brand of program" tooltip-placement="bottom"> <a data-ng-click="brandingtitletoggle()" ui-sref="branding({ organizationid: organizationid, programid:programid })">branding<span></span></a> </li> <li ui-sref-active="active" class="nav-editor" data-toggle="tooltip" data-placement="bottom" tooltip="use tool customize program" tooltip-placement="bottom"> <a data-ng-click="settingstitletoggle()" ui-sref="program-editor({ organizationid: organizationid, programid:programid })">program editor<span></span></a> </li> <li ui-sref-active="active" class="nav-fees" data-toggle="tooltip" data-placement="bottom" tooltip="use tool add fee program" tooltip-placement="bottom"> <a data-ng-click="feetitletoggle($index, $event)" ui-sref="fees({ organizationid: organizationid, programid:programid })">program fees<span></span></a> </li> <li data-ng-show="showbrandingtitle"><span class="naviconfade">branding settings</span></li> <li data-ng-show="showsettingstitle"><span class="naviconfade">program settings</span></li> <li data-ng-show="showfeetitle"><span class="naviconfade">fee settings</span></li> </ul>
you have spelling mistake
$scope.showfeestitle = false;
should be:
$scope.showfeetitle = false;
Comments
Post a Comment