Bookmarking article in ionic app - angularjs

How to bookmark article in ionic app
<div class="container" on-tap="toggleHeader()" >
<!-- on-tap="toggleHeader()" -->
<div id="test" class="slideItem" ng-class="{'list list-inset-hide': Aindex > $index + 1, 'back-items': Aindex < $index+1}" ng-repeat="Listnews in AllnewsList" ng-style="{'height':'{{hgt}}','z-index': (AllnewsList.length - $index)}" on-swipe-up="swipeUp($event)" on-swipe-down="swipeDown($event)">
<div ng-class="{'satin': Aindex < $index+1, 'not-satin': Aindex != $index}" >
</div>
<ul class="list-unstyled cs-tag-item-grp newsDiv">
<li class="clearfix">
<div class="newsCnt">
<div ng-show="Listnews.ImageUrl !=' ' " class="newsImageContainer">
<img class="newsImage" ng-src="{{Listnews.ImageUrl}}"/>
</div>
<div class="newTitle pLR5">{{Listnews.Heading}}</div>
<div class="newsDisc pLR5">{{Listnews.Para | limitTo: 300}} {{Listnews.Para.length > 300 ? '…':''}}</div>
<div class="newsEdit pLR5"><strong>Starticle</strong> by - {{Listnews.Editor}} / {{Listnews.PublishedDate | date:'dd MMM'}} </div>
<div class="newSrc pLR5" ng-show="Listnews.SourceLink" >more at - <a ng-href="{{Listnews.SourceLink}}" onclick="window.cordova.InAppBrowser.open(this.href, '_blank', 'location=yes'); return false;">{{Listnews.SourceName}}</a>
</div>
<div class="tabs tabs-icon-only" >
<a class="tab-item" >
<a class="button icon ion-share" ng-click="shareAnywhere(Listnews.ImageUrl,Listnews.Heading,Listnews.Para,Listnews.SourceLink)"></a>
</a>
<a class="tab-item">
<a ng-show="!bookmarkstate" class="button icon ion-ios-bookmarks-outline" ng-click="bookmark(true)"></a>
<a ng-show="bookmarkstate" class="button icon ion-ios-bookmarks" ng-click="bookmark(false)"></a>
</a>
<a class="tab-item">
<a class="button icon ion-chatbox-working" ng-click="commentModalopen()"></a>
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
bookmark function
$scope.bookmark = function(state)
{
$scope.info = null;
if(!localStorage.getItem("localnews")){
var book_data = {data: []};
var notID = 0 ;
window.localStorage.setItem("book_data", JSON.stringify(book_data));
window.localStorage.setItem("id", JSON.stringify(notID));
}
$scope.info = JSON.parse(window.localStorage.getItem("book_data"));
$scope.bookmarkstate = state
var page = document.getElementById("localnews").value;
if(page == null)
{
alert("Bookmark Not added");
return;
}
var id = JSON.parse(window.localStorage.getItem("book_data"));
var array = {id:id};
$scope.info.data[$scope.info.data.length] = array;
window.localStorage.setItem("rp_data", JSON.stringify($scope.info));
window.localStorage.setItem("id", JSON.stringify(id + 1));
alert("Bookmark Added")
document.getElementById("Aindex").value =" ";
$scope.getBookmarked();
}

Related

The controller with the name 'viewctrl' is not registered

<div class="wrapper" id="body" ng-app="masterview" ng-controller="masterctrl" data-ng-init="getmenus()">
<header id="header">
<div class="header-width row">
<div class="col-xl-9">
<div class="logo float-xs-left">
<a href="#">
<img src="~/img/logo_accord.png" alt="Ace Report" />
</a>
</div>
</div>
<div class="col-xl-3 header-right">
<div class="header-inner-right">
<div class="float-default chat">
<div class="right-icon">
<a href="#">
<i class="fa fa-envelope-o"></i>
</a>
</div>
</div>
<div class="float-default chat">
<div class="right-icon">
<a href="#">
<i class="fa fa-comments-o"></i>
</a>
</div>
</div>
<div class="user-dropdown">
<div class="btn-group">
<a href="index.html#" class="user-header dropdown-toggle" data-toggle="dropdown"
data-animation="slideOutUp" aria-haspopup="true"
aria-expanded="false">
<img src="~/assets/images/user.jpg" alt="Profile image" />
</a>
<div class="dropdown-menu user drop-profile dropdown-card dropdown-card-profile animated flipInY">
#*
<header class="card-header d-flex">
<a href="javascript:void(0);" class="text-center">
<i class="fa fa-user"></i>
</a>
<a href="javascript:void(0);" class="text-center">
<i class="fa fa-cog"></i>
</a>
<a href="javascript:void(0);" class="text-center">
<i class="fa fa-power-off"></i>
</a>
</header>*#
<ul class="list-unstyled card-body">
#*
<li>
<a href="index.html#">
<span>
<span class="align-middle">Manage Accounts</span>
</span>
</a>
</li>*#
<li>
<a href="index.html#">
<span>
<span class="align-middle">Change Password</span>
</span>
</a>
</li>
#*
<li>
<a href="index.html#">
<span>
<span class="align-middle">Check Inbox</span>
</span>
</a>
</li>*#
<li>
<a href="#Url.Action("Logout", "Admin")">
<span>
<span class="align-middle">Sign Out</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--top menu bar-->
<div id="header-icon" class="" >
<div class="header-width">
<div class="col-xl-12">
<div class="menucontainer">
<div class="overlapblackbg"></div>
<a id="navtoggle" class="animated-arrow">
<span></span>
</a>
<nav id="nav" class="topmenu" role="navigation">
<div class="sidebar-search">
<div class="logo float-xs-left">
</div>
<a href="javascript:void(0)">
<i class="search-close icon_search"></i>
</a>
</div>
<!--left menu-->
<ul id="dvMenuInner" class="nav navbar-nav">
<li ng-repeat="parent in menu" class="dropdown">
<a href="/{{parent.url}}/{{parent.actionname}}" ng-show="!parent.children">
<span class="fa fa-tachometer header-icon" aria-hidden="true"></span>{{parent.menuname}}
</a>
<a href="/{{parent.url}}/{{parent.actionname}}" ng-show="parent.children" class="dropdown-toggle" data-toggle="dropdown">
<span class="fa fa-tachometer header-icon" aria-hidden="true"></span>{{parent.menuname}}
</a>
<ul class="dropdown-menu" ng-show="parent.children">
<li ng-repeat="child in parent.children" ng-show="!child.childrencc">
{{child.menuname}}
</li>
<li class="dropdown-submenu" ng-repeat="child in parent.children" ng-show="child.childrencc">
{{child.menuname}}
{{child.menuname}}
<ul class="dropdown-menu" ng-show="child.childrencc">
<li ng-repeat="children in child.childrencc">
{{children.menuname}}
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
<!-- END HEADER -->
<!-- START CONTENT -->
<section id="main" class="container-fluid">
<!-- START RIGHT CONTENT -->
#*
<div class="row">
<!-- START RIGHT CONTENT -->
<section id="content-wrapper" class="form-elements">
<!-- START PAGE TITLE -->
<div class="site-content-title">
<h2 class="float-xs-left content-title-main">Client Dashboard</h2>
<!-- START BREADCRUMB -->
<ol class="breadcrumb float-xs-right">
<li class="breadcrumb-item">
<span class="fa fa-home" aria-hidden="true"></span>
Home
</li>
<li class="breadcrumb-item active">Dashboard</li>
</ol>
<!-- END BREADCRUMB -->
</div>
<!-- END PAGE TITLE -->
</section>
</div>*#
#*
<div class="contain-inner"></div>*#
<ng-view> #RenderBody()</ng-view>
</section>
#*
</div>
I want menus to be loaded at the start of the application and I have multiple pages in MVC, so the problem is getting the error stated that controller not registered. so can you tell me how can I handle ng-app and ng-controller in master page and pages?
I am loading menus as follows:
app.controller('masterctrl', function ($scope, $http, $window) {
$scope.getmenus = function () {
var holding_url = encodeURI(APIURL + "getmenus");
$http.get(holding_url)
.then(function (response) {
$scope.names = response.data.t1;
$scope.menu = [];
$scope.childrenmenu = [];
$scope.count = 0;
angular.forEach(response.data.t1, function (value, key) {
if (value.parentid == 0) {
$scope.menu.push(value);
}
});
angular.forEach(response.data.t1, function (value, key) {
if (value.parentid != 0) {
angular.forEach($scope.menu, function (value2, key2) {
if (value.parentid == value2.menuid) {
if (value2.children == undefined) {
value2.children = [];
value2.showChildren = false;
}
value2.children.push(value);
$scope.childrenmenu.push(value);
}
});
}
});
angular.forEach(response.data.t1, function (value, key) {
if (value.parentid != 0) {
angular.forEach($scope.childrenmenu, function (value3, key3) {
if (value.parentid == value3.menuid) {
if (value3.childrencc == undefined) {
value3.childrencc = [];
value3.showChildren = false;
}
value3.childrencc.push(value);
}
});
}
});
Please see image due to that error data in table is also not loading properly, because master page and pages controller can not work together.
you need to bootstrap them using angular.bootstrap()
first give id to the child div lets say App2
<div class="ibox float-e-margins" ng-app="childview" id="App2">
</div>
angular.bootstrap(document.getElementById("App2"), ['childview']);
this will allow Angular to run subsequent views to run on the dom
Why not this ?
<div class="wrapper" id="body" ng-app="masterview" >
<div ng-controller="masterctrl" data-ng-init="getmenus()">
<!-- rest of your code --->
</div>
</div>

how can fix data not showing with angularjs and laravel

Is anyone help me, when I start to code to show data in blade with angularJS, data not showing in the page, even the data exists in the console. This following code in my app.js
// app.js
$scope.view_tab = 'shop1';
$scope.changeTab = function(tab) {
$scope.view_tab = tab;
}
// List product
$scope.loadProduct = function () {
$http.get('/getproduct').then(function success(e) {
console.log(e.data);
$scope.products = e.data.product;
$scope.totalProduct = $scope.products.length;
$scope.currentPage = 1;
$scope.pageSize = 9;
$scope.sortKey = 'id_kain';
};
//index.blade.php
<div class="shop-top-bar">
<div class="shop-tab nav">
<a ng-class="{'active': view_tab == 'shop1'}" ng-click="changeTab('shop1')" data-toggle="tab">
<i class="fa fa-table"></i>
</a>
<a ng-class="{'active': view_tab == 'shop2'}" ng-click="changeTab('shop2')" data-toggle="tab">
<i class="fa fa-list-ul"></i>
</a>
</div>
</div>
<div class="shop-bottom-area mt-35">
<div class="tab-content jump">
<div class="tab-pane" ng-class="{active: view_tab == 'shop1'}">
<div class="row">
<div ng-repeat="data in filtered = ( products | filter:search ) | orderBy:sortData | itemsPerPage: 9" class="col-xl-4 col-md-6 col-lg-6 col-sm-6">
<div class="product-wrap mb-25 scroll-zoom">
<div class="product-img">
<a ng-click="showForm(data)">
<img class="default-img" ng-src="#{{ data.gambar_kain[0].gambar_kain }}" alt="">
<img class="hover-img" ng-src="#{{ data.gambar_kain[1].gambar_kain }}" alt="">
</a>
</div>
<div class="product-content text-center">
<h3>#{{data.nama_kain}}</h3>
<div class="product-price">
<span>#{{numberingFormat(data.data_kain[0].harga_kain)}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" ng-class="{active: view_tab == 'shop2'}">
<div dir-paginate="datas in filtered = ( products | filter:search ) | orderBy:sortData | itemsPerPage:9" class="shop-list-wrap mb-30">
<div class="row">
<div class="col-xl-4 col-lg-5 col-md-5 col-sm-6">
<div class="product-wrap">
<div class="product-img">
<a ng-click="showForm(datas)">
<img class="default-img" ng-src="#{{ datas.gambar_kain[0].gambar_kain }}" alt="">
<img class="hover-img" ng-src="#{{ datas.gambar_kain[1].gambar_kain }}" alt="">
</a>
</div>
</div>
</div>
<div class="col-xl-8 col-lg-7 col-md-7 col-sm-6">
<div class="shop-list-content">
<h3>#{{data.nama_kain}}</h3>
<div class="product-list-price">
<span>#{{numberingFormat(datas.data_kain[0].harga_kain)}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pro-pagination-style text-center mt-30">
<dir-pagination-controls
max-size="1"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
</div>
</div>
Data still not shows in the page, there are not errors in this page, but I don't know how can I fix this.
As I know there is two way to show data in Angular JS when you define the scopes then you need the ng-bind or ng-model to show data in the front end.
1- AngularJS Data Binding
live Example https://www.w3schools.com/code/tryit.asp?filename=G2DQQ2GSJ3EO
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind="firstname "></p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John will be change";
});
</script>
2-AngularJS ng-model Directive
Live Example https://www.w3schools.com/code/tryit.asp?filename=G2DQQEUEPSOC
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
<h1>You entered: {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
NOTE: try with static data and then check that you have valid data to make it dynamic
I hope this helps you!

Angular ng-repeat inside nav tab not working

I'm trying to generate a nav tab dynamically.
This code works:
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" ng-class="{active:isSelected(1)}">
<a ng-click="select(1)" aria-controls="all menu"role="tab">The Menu</a></li>
<li role="presentation" ng-class="{active:isSelected(2)}">
<a ng-click="select(2)" aria-controls="appetizers" role="tab">Appetizers</a></li>
<li role="presentation" ng-class="{active:isSelected(3)}">
<a ng-click="select(3)" aria-controls="mains" role="tab">Mains</a></li>
<li role="presentation" ng-class="{active:isSelected(4)}">
<a ng-click="select(4)" aria-controls="desserts" role="tab">Desserts</a></li>
</ul>
<div class="tab-content">
<ul class="media-list tab-pane fade in active">
<li class="media" ng-repeat="dish in dishes | filter:filtText">
<div class="media-left media-middle">
<a ui-sref="app.dishdetails({id: dish._id})">
<img class="media-object img-thumbnail"
ng-src={{dish.image}} alt="Uthappizza">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger label-xs">{{dish.label}}</span>
<span class="badge">{{dish.price/100 | currency}}</span></h2>
<p ng-show="showDetails">{{dish.description}}</p>
<button ng-show="showFavorites" ng-click="addToFavorites(dish._id)" class="btn btn-xs btn-default pull-right"
type="button">
<i class="fa fa-heart"></i>
</button>
</div>
</li>
</ul>
</div>
Follow the jscode in Menucontroller:
menuFactory.query(
function (response) {
$scope.dishes = response;
$scope.showMenu = true;
},
function (response) {
$scope.message = "Error: " + response.status + " " + response.statusText;
});
$scope.select = function (setTab) {
$scope.tab = setTab;
if (setTab === 2) {
$scope.filtText = "appetizer";
} else if (setTab === 3) {
$scope.filtText = "mains";
} else if (setTab === 4) {
$scope.filtText = "dessert";
} else {
$scope.filtText = "";
}
};
$scope.isSelected = function (checkTab) {
return ($scope.tab === checkTab);
};
Here the code with ng-repeat:
<ul class="nav nav-tabs" role="tablist">
<li ng-repeat="category in categories" role="presentation" ng-class="{active:isSelected(category)}">
<a ng-click="select(category)" aria-controls="category" role="tab">{{category}}</a>
</li>
</ul>
Here new jscode in the controller:
$scope.categories = ["all menu","appetizers","mains","desserts"];
$scope.select = function (setTab) {
$scope.tab = setTab;
if (setTab === "all menu") {
$scope.filtText = "";
} else {
$scope.filtText = setTab;
}
};
$scope.isSelected = function (category){
$scope.currentCategory = category;
};
When I tried with ng-repeat the links in the nav don't work. Previously, I've forgot to replace numbers for strings ( $scope.isSelected = function (checkTab) {return ($scope.tab === checkTab);}; The function select is now calling.
I'd like to put the items in an array and generate the nav dynamically from a list of categories. Finally I replace $scope.filtText = "setTab" to $scope.filtText = setTab and now filtText is working correcty.
Thanks!!

ng-show ng-hide based on $scope variable not working properly

I want to show and hide based on $rootScope variable. I am taking a variable in scope and assigned it true in all functions and all are in same controller, based on that I ng-show..but its not hiding others when switching.
Controller.js:
$rootScope.pcity = true;
if(geolocation.subLocality1 != null){
$rootScope.subLocality=true;
var getCityPopularUsers = function() {
var pageNumber = 0;
$scope.pageSize = 6;
var data = "pageNumber=" + pageNumber + "&pageSize="
+ $scope.pageSize + "&city=" + $routeParams.searchText;
homeService.getPopularUsers(data, function(users) {
$rootScope.cPopUserss = users;
});
};
getCityPopularUsers();
var getSubLocalityPopularTags = function() {
var pageNumber = 0;
$scope.pageSize = 6;
var data = "pageNumber=" + pageNumber + "&pageSize="
+ $scope.pageSize + "&city=" + $routeParams.searchText;
homeService.getSubLocalityPopularTags(data, function(tags) {
$rootScope.cPopsubTags = tags;
});
};
getSubLocalityPopularTags();
}
if(geolocation.city != null) {
$rootScope.city=true;
var getPopularByCityUsers = function() {
var pageNumber = 0;
$scope.pageSize = 6;
var data = "pageNumber=" + pageNumber + "&pageSize="
+ $scope.pageSize + "&city="+ $routeParams.searchText;
homeService.getPopularByCityUsers(data, function(users) {
$rootScope.cPopUsers = users;
});
};
getPopularByCityUsers();
var getCityPopularTags = function() {
var pageNumber = 0;
$scope.pageSize = 6;
var data = "pageNumber=" + pageNumber + "&pageSize="
+ $scope.pageSize + "&city="+ $routeParams.searchText;
homeService.getPopularTagsByCity(data, function(tags) {
$rootScope.cPopTags = tags;
});
};
getCityPopularTags();
}
if(geolocation.state != null) {
$rootScope.state=true ;
var getPopularByStateUsers = function() {
var pageNumber = 0;
$scope.pageSize = 6;
var data = "pageNumber=" + pageNumber + "&pageSize="
+ $scope.pageSize + "&city=" + $routeParams.searchText;
homeService.getPopularByStateUsers(data, function(users) {
$rootScope.cPopStateUsers = users;
});
};
getPopularByStateUsers();
var getStatePopularTags = function() {
var pageNumber = 0;
$scope.pageSize = 6;
var data = "pageNumber=" + pageNumber + "&pageSize="
+ $scope.pageSize + "&city="+ $routeParams.searchText;
homeService.getStatePopularTags(data, function(tags) {
$rootScope.cPopStateTags = tags;
});
};
getStatePopularTags();
}
This is my index.jsp:
<div class="popular-account-list list-home-aside" ng-show="pcity == true && subLocality == true ">
<ul class="nav">
<li class="active icon bb-users">Popular Account</li>
<li ng-repeat="user in cPopUserss | limitTo : 4">
<figure class="clearfix" ng-show="loggedInUser.id!=user.id">
<div class="home-acc-imgsize" ng-if="user.photo != null">
<a href="#!/profile/user/{{user.id}}">
<img ng-src="settings/dp?username={{user.username}}&photoId={{user.photo.id}}&fileName={{user.photo.fileName}}"
alt="profile-img" class="img-responsive" style="height:100%;width:100%">
</a>
</div>
<div class="home-acc-imgsize" ng-if="user.photo == null">
<a href="#!/profile/user/{{user.id}}">
<img src="images/userimage.jpg" alt="profile-img" class="img-responsive">
</a>
</div>
<figcaption>
<p ng-show="user.domainName == null">
{{user.firstName}} {{user.lastName}}
</p>
<p ng-show="user.domainName != null">
{{user.username}}
</p>
<p><span>{{user.designation}}</span></p>
<button class="btn btn-following btn-xs" role="button"
ng-show="isFollowed == false || isFollowed == 'false' && user.id != loggedInUser.id"
ng-click="follow(user.id)">Follow</button>
<button class="btn btn-following btn-xs" role="button" ng-show="isFollowed == 'true'"
ng-click="removeFollow(user.id)">Following</button>
</figcaption>
</figure>
</li>
<li>More Accounts <span class="caret"></span></li>
</ul>
</div><!-- eo popular-account-list-list -->
<div class="popular-account-list list-home-aside" ng-show="pcity == true && city == true">
<ul class="nav">
<li class="active icon bb-users" >Popular Account</li>
<li ng-repeat="user in cPopUsers | limitTo : 4">
<figure class="clearfix" ng-show="loggedInUser.id!=user.id">
<div class="home-acc-imgsize" ng-if="user.photo != null">
<a href="#!/profile/user/{{user.id}}">
<img ng-src="settings/dp?username={{user.username}}&photoId={{user.photo.id}}&fileName={{user.photo.fileName}}"
alt="profile-img" class="img-responsive" style="height:100%;width:100%">
</a>
</div>
<div class="home-acc-imgsize" ng-if="user.photo == null">
<a href="#!/profile/user/{{user.id}}">
<img src="images/userimage.jpg" alt="profile-img" class="img-responsive">
</a>
</div>
<figcaption>
<p ng-show="user.domainName == null">
<a href="#!/profile/user/{{user.id}}">{{user.firstName}} {{user.lastName}}
</a>
</p>
<p ng-show="user.domainName != null">
{{user.username}}
</p>
<p><span>{{user.designation}}</span></p>
<button class="btn btn-following btn-xs" role="button"
ng-show="isFollowed == false || isFollowed == 'false' && user.id != loggedInUser.id"
ng-click="follow(user.id)">Follow</button>
<button class="btn btn-following btn-xs" role="button" ng-show="isFollowed == 'true'"
ng-click="removeFollow(user.id)">Following</button>
</figcaption>
</figure>
</li>
<li>More Accounts <span class="caret"></span>
</li>
</ul>
</div><!-- eo popular-account-list-list -->
<div class="popular-account-list list-home-aside" ng-show="pcity == true && state == true ">
<ul class="nav">
<li class="active icon bb-users">Popular Account</li>
<li ng-repeat="user in cPopStateUsers | limitTo : 4">
<figure class="clearfix" ng-show="loggedInUser.id!=user.id">
<div class="home-acc-imgsize" ng-if="user.photo != null">
<a href="#!/profile/user/{{user.id}}">
<img ng-src="settings/dp?username={{user.username}}&photoId={{user.photo.id}}&fileName={{user.photo.fileName}}"
alt="profile-img" class="img-responsive" style="height:100%;width:100%">
</a>
</div>
<div class="home-acc-imgsize" ng-if="user.photo == null">
<a href="#!/profile/user/{{user.id}}">
<img src="images/userimage.jpg" alt="profile-img" class="img-responsive">
</a>
</div>
<figcaption>
<p ng-show="user.domainName == null">
<a href="#!/profile/user/{{user.id}}">{{user.firstName}} {{user.lastName}}
</a>
</p>
<p ng-show="user.domainName != null">
{{user.username}}
</p>
<p><span>{{user.designation}}</span></p>
<button class="btn btn-following btn-xs" role="button"
ng-show="isFollowed == false || isFollowed == 'false' && user.id != loggedInUser.id"
ng-click="follow(user.id)">Follow</button>
<button class="btn btn-following btn-xs" role="button" ng-show="isFollowed == 'true'"
ng-click="removeFollow(user.id)">Following</button>
</figcaption>
</figure>
</li>
<li>More Accounts <span class="caret"></span>
</li>
</ul>
</div><!-- eo popular-account-list-list -->
In controller if I use $scope instead of rootScope nothing works only, so where i am going wrong.Please help

Show and hide elements of ng-repeat cycle

Here is my HTML:
<ul class="no-bullet">
<li ng-repeat="(group, count) in info.info">
<a href="#" ng-click="getQuestions(group)"
ng-mouseenter="showGroupPanel()" ng-mouseleave="hideGroupPanel()"
>{{group}} ({{count}}) </a>
<div class="group_panel" ng-show="hoveringGroup">
<i class="fa fa-check"></i>
<i class="fa fa-folder-o"></i>
</div>
</li>
And here is my JS:
$scope.hoveringGroup = false;
$scope.showGroupPanel = function() {
$scope.hoveringGroup = true;
}
$scope.hideGroupPanel = function() {
$scope.hoveringGroup = false;
}
When user mouseover one of elements of the list additional div (group_panel) is displayed. But it is displayed for all elements of the list. How can I fix it to display "group-panel" div only for one element (mouseovered) of the list?
Simplest way : use ng-repeat's isolate scope. (hoveringGroup will be a separate variable for each ng-repeat iteration)
<ul class="no-bullet">
<li ng-repeat="(group, count) in info.info">
<a href="#" ng-click="getQuestions(group)"
ng-mouseenter="hoveringGroup = true" ng-mouseleave="hoveringGroup = false"
>{{group}} ({{count}}) </a>
<div class="group_panel" ng-show="hoveringGroup">
<i class="fa fa-check"></i>
<i class="fa fa-folder-o"></i>
</div>
</li>
You could also store the information in your repeated item :
<ul class="no-bullet">
<li ng-repeat="info in info.info">
<a href="#" ng-click="getQuestions(info.group)"
ng-mouseenter="showGroupPanel(info)" ng-mouseleave="hideGroupPanel(info)"
>{{info.group}} ({{info.count}}) </a>
<div class="group_panel" ng-show="info.hoveringGroup">
<i class="fa fa-check"></i>
<i class="fa fa-folder-o"></i>
</div>
</li>
$scope.showGroupPanel = function(info) {
info.hoveringGroup = true;
}
$scope.hideGroupPanel = function(info) {
info.hoveringGroup = false;
}
var app = angular.module('app', []);
app.controller('homeCtrl', function($scope) {
$scope.info = {
info: [{
id: 1
}, {
id: 2
}, {
id: 3
}
]
}
$scope.hoveringGroup = false;
$scope.showGroupPanel = function(level) {
level.hoveringGroup = true;
}
$scope.hideGroupPanel = function(level) {
level.hoveringGroup = false;
}
$scope.createlevel = function(count, level) {
return angular.copy(count, level)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<div ng-app="app">
<div ng-controller="homeCtrl">
<ul class="no-bullet">
<li ng-repeat="(group, count) in info.info" ng-init="level =createlevel(count,level)">
{{group}} ({{count}})
<div class="group_panel" ng-show="level.hoveringGroup">
<i class="fa fa-check"></i>
<i class="fa fa-folder-o"></i>
</div>
</li>
</ul>
</div>
</div>

Resources