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

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

Related

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!!

Bookmarking article in ionic app

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

How to delete data inside the list using bootstrap modal?

I just want to delete the data inside the table using bootstrap modal, but it seems so hard to find the right way how to do this, here's my sample code. Inside my modal I have an href code that use to delete the data
, it is working outside the modal. I just want to know any solution make this working. thanks.
var app = angular.module('app', ['ui.bootstrap']);
var student = [{
name: 'Andrew'
}, {
name: 'Butler'
}, {
name: 'Cameron'
}, {
name: 'Delo'
}, {
name: 'Emman'
}, {
name: 'Ferbs'
}];
app.filter('startFrom', function() {
return function(input, start) {
if (input) {
start = +start; //parse to int
return input.slice(start);
}
return [];
}
});
app.controller('customersCtrl', function($scope, $timeout) {
$scope.list = student;
$scope.currentPage = 1; //current page
$scope.entryLimit = 10; //max no of items to display in a page
$scope.filteredItems = $scope.list.length; //Initially for no filter
$scope.totalItems = $scope.list.length;
$scope.setPage = function(pageNo) {
$scope.currentPage = pageNo;
};
$scope.filter = function() {
$timeout(function() {
$scope.filteredItems = $scope.filtered.length;
}, 10);
};
$scope.sort_by = function(predicate) {
$scope.predicate = predicate;
$scope.reverse = !$scope.reverse;
};
});
app.filter('startsWithA', function() {
return function(items, letter) {
console.log(items, letter)
var filtered = [];
var letterMatch = new RegExp(letter, 'i');
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (letterMatch.test(item.name.substring(0, 1))) {
filtered.push(item);
}
}
console.log(filtered);
return filtered;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
<div ng-app="app">
<div class="container" ng-controller="customersCtrl">
<div class="row">
<div class="col-12">
<h2 id="titleHead"><center>Student List</center></h2>
</div>
<div class="option-panel">
<div class="col-sm-3 col-md-3 pull-right">
<form class="navbar-form">
<div class="input-group">
<input type="text" ng-model="search" ng-click="filter()" placeholder="Search student" class="form-control" placeholder="Search" name="search">
</div>
</form>
</div>
</div>
<div class="nav navbar-default">
<div class="tab-panel">
<nav>
<ul>
<li class="active" name="active"><a ng-click="letter = '[AB]'">A-B</a>
</li>
<li class="active" name="active"><a ng-click="letter = '[CD]'">C-D</a>
</li>
<li class="active" name="active"><a ng-click="letter = '[EF]'">E-F</a>
</li>
</ul>
</nav>
</div>
</div>
<div id="no-more-tables">
<table class="col-md-12 table-bordered table-condensed cf" ng-show="filteredItems > 0">
<thead class="cf">
<tr>
<th>
<center>Name
<a ng-click="sort_by('first_name');"></a>
</center>
</th>
</tr>
</thead>
<tbody color="#">
<tr ng-repeat="data in filtered = (list | filter:search |orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit |startsWithA:letter |limitTo:entryLimit ">
<td data-title="Name" class="text-center">{{data.name}} <a type="button" class="btn btn-xs btn-primary" style="width: 40%;" href="#" data-toggle="modal" data-target="#myModal" >Delete</a>
</td>
</tr>
</tbody>
</table>
<div class="col-md-12" ng-show="filteredItems == 0">
<div class="col-md-12">
<center>
<h4>No results found</h4>
</center>
</div>
</div>
<div class="col-md-12" ng-show="filteredItems > 0">
<center>
<div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="«" next-text="»"></div>
</center>
</div>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete Student</h4>
</div>
<div class="modal-body">
<p>Do you want to delete this student?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary" href="<?php echo base_url(); ?>index.php/students/edit/studentform/{{data.id}}" >Yes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
First I would suggest using $http service, or similar, for removing a record. Also, You'll notice that I made a change to the way your controller was organized by using the controller as syntax, and assigning everything to the controller, and not to the scope. That way you can pass on the controllers scope to directives and such more easily.
The idea is that you preserve an ID of the selected item, so that you can use it later on when you trigger the server delete action.
This can be done in many different ways, this is just one of the ways.
Hope this helps.
var app = angular.module('app', ['ui.bootstrap']);
var student = [{
id: 0,
name: 'Andrew'
}, {
id: 1,
name: 'Butler'
}, {
id: 2,
name: 'Cameron'
}, {
id: 3,
name: 'Delo'
}, {
id: 4,
name: 'Emman'
}, {
id: 5,
name: 'Ferbs'
}];
app.filter('startFrom', function() {
return function(input, start) {
if (input) {
start = +start; //parse to int
return input.slice(start);
}
return [];
}
});
app.controller('customersCtrl', function($http, $timeout) {
var vm = this,
itemId = null;
/**
* Store a selected item's ID
* #param id
*/
vm.getItemId = function (id) {
itemId = id;
};
/**
* Remove the selected item from the list
*/
vm.deleteItemFunction = function () {
console.log('remove', itemId);
// And then something like this
$http.delete('/students/edit/studentform/' + itemId).success(function () {
console.log('successfully removed');
});
};
vm.list = student;
vm.currentPage = 1; //current page
vm.entryLimit = 10; //max no of items to display in a page
vm.filteredItems = vm.list.length; //Initially for no filter
vm.totalItems = vm.list.length;
vm.setPage = function(pageNo) {
vm.currentPage = pageNo;
};
vm.filter = function() {
$timeout(function() {
vm.filteredItems = vm.filtered.length;
}, 10);
};
vm.sort_by = function(predicate) {
vm.predicate = predicate;
vm.reverse = !vm.reverse;
};
});
app.filter('startsWithA', function() {
return function(items, letter) {
console.log(items, letter)
var filtered = [];
var letterMatch = new RegExp(letter, 'i');
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (letterMatch.test(item.name.substring(0, 1))) {
filtered.push(item);
}
}
console.log(filtered);
return filtered;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
<div ng-app="app">
<div class="container" ng-controller="customersCtrl as customer">
<div class="row">
<div class="col-12">
<h2 id="titleHead"><center>Student List</center></h2>
</div>
<div class="option-panel">
<div class="col-sm-3 col-md-3 pull-right">
<form class="navbar-form">
<div class="input-group">
<input type="text" ng-model="search" ng-click="customer.filter()" placeholder="Search student" class="form-control" placeholder="Search" name="search">
</div>
</form>
</div>
</div>
<div class="nav navbar-default">
<div class="tab-panel">
<nav>
<ul>
<li class="active" name="active"><a ng-click="letter = '[AB]'">A-B</a>
</li>
<li class="active" name="active"><a ng-click="letter = '[CD]'">C-D</a>
</li>
<li class="active" name="active"><a ng-click="letter = '[EF]'">E-F</a>
</li>
</ul>
</nav>
</div>
</div>
<div id="no-more-tables">
<table class="col-md-12 table-bordered table-condensed cf" ng-show="customer.filteredItems > 0">
<thead class="cf">
<tr>
<th>
<center>Name
<a ng-click="customer.sort_by('first_name');"></a>
</center>
</th>
</tr>
</thead>
<tbody color="#">
<tr ng-repeat="data in filtered = (customer.list | filter:search |orderBy : customer.predicate : customer.reverse) | startFrom:(customer.currentPage-1)* customer.entryLimit |startsWithA:letter |limitTo: customer.entryLimit ">
<td data-title="Name" class="text-center">
{{data.name}}
<a type="button" class="btn btn-xs btn-primary" style="width: 40%;" href="#" ng-click="customer.getItemId(data.id)" data-toggle="modal" data-target="#myModal">Delete</a>
</td>
</tr>
</tbody>
</table>
<div class="col-md-12" ng-show="customer.filteredItems == 0">
<div class="col-md-12">
<center>
<h4>No results found</h4>
</center>
</div>
</div>
<div class="col-md-12" ng-show="customer.filteredItems > 0">
<center>
<div pagination="" page="customer.currentPage" on-select-page="customer.setPage(page)" boundary-links="true" total-items="customer.filteredItems" items-per-page="customer.entryLimit" class="pagination-small" previous-text="«" next-text="»"></div>
</center>
</div>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete Student</h4>
</div>
<div class="modal-body">
<p>Do you want to delete this student?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary" ng-click="customer.deleteItemFunction()">Yes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

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>

AngularJS No output No errors

After many hours I thought my code is running, but I get no output in my table...
Can't find the error...
the console.log($scope.articles) has the full array of articles.
jscode:
(function () {
"use strict";
angular.module("app.tables", []).controller("articlesCtrl", ["$scope", "$http", "$filter",
function ($scope, $http, $filter) {
var init;
$http.get('SOMEURL').success(function (data) {
$scope.articles = data;
console.log($scope.articles);
}).
error(function (data) {
// log error
})
, $scope.searchKeywords = "", $scope.filteredArticles = [], $scope.row = "", $scope.select = function (page) {
if (!$scope.currentPageArticles || !$scope.currentPageArticles.length) { return; }
var end, start;
return start = (page - 1) * $scope.numPerPage, end = start + $scope.numPerPage, $scope.currentPageArticles = $scope.filteredArticles.slice(start, end)
}, $scope.onFilterChange = function () {
return $scope.select(1), $scope.currentPage = 1, $scope.row = ""
}, $scope.onNumPerPageChange = function () {
return $scope.select(1), $scope.currentPage = 1
}, $scope.onOrderChange = function () {
return $scope.select(1), $scope.currentPage = 1
}, $scope.search = function () {
return $scope.filteredArticles = $filter("filter")($scope.articles, $scope.searchKeywords), $scope.onFilterChange()
}, $scope.order = function (rowName) {
return $scope.row !== rowName ? ($scope.row = rowName, $scope.filteredArticles = $filter("orderBy")($scope.articles, rowName), $scope.onOrderChange()) : void 0
}, $scope.numPerPageOpt = [3, 5, 10, 20], $scope.numPerPage = $scope.numPerPageOpt[2], $scope.currentPage = 1, $scope.currentPageArticles = [], (init = function () {
return $scope.search(), $scope.select($scope.currentPage)
})()
}
])}.call(this));
HTML-Code:
<section class="panel panel-default table-dynamic">
<div class="panel-heading"><strong>Artikel</strong></div>
<div class="table-filters">
<div class="row">
<div class="col-sm-4 col-xs-6">
<form>
<input type="text"
placeholder="Search..."
class="form-control"
data-ng-model="searchKeywords"
data-ng-keyup="search()">
</form>
</div>
</div>
</div>
<table class="table table-bordered table-striped table-responsive">
<thead>
<tr>
<th>
<div class="th">
ID
<span class="fa fa-angle-up"
data-ng-click=" order('idArticles') "
data-ng-class="{active: row == 'idArticles'}"></span>
<span class="fa fa-angle-down"
data-ng-click=" order('-idArticles') "
data-ng-class="{active: row == '-idArticles'}"></span>
</div>
</th>
<th>
<div class="th">
Artikelgruppe
<span class="fa fa-angle-up"
data-ng-click=" order('artGroupName') "
data-ng-class="{active: row == 'artGroupName'}"></span>
<span class="fa fa-angle-down"
data-ng-click=" order('-artGroupName') "
data-ng-class="{active: row == '-artGroupName'}"></span>
</div>
</th>
<th>
<div class="th">
Artikelname
<span class="fa fa-angle-up"
data-ng-click=" order('artName') "
data-ng-class="{active: row == 'artName'}"></span>
<span class="fa fa-angle-down"
data-ng-click=" order('-artName') "
data-ng-class="{active: row == '-artName'}"></span>
</div>
</th>
<th>
<div class="th">
Preis
<span class="fa fa-angle-up"
data-ng-click=" order('artPrice') "
data-ng-class="{active: row == 'artPrice'}"></span>
<span class="fa fa-angle-down"
data-ng-click=" order('-artPrice') "
data-ng-class="{active: row == '-artPrice'}"></span>
</div>
</th>
<th>
<div class="th">
EGIS-Artikelnummer
<span class="fa fa-angle-up"
data-ng-click=" order('egisArtId') "
data-ng-class="{active: row == 'egisArtId'}"></span>
<span class="fa fa-angle-down"
data-ng-click=" order('-egisArtId') "
data-ng-class="{active: row == '-egisArtId'}"></span>
</div>
</th>
<th>
<div class="th">
Sichtbarkeit
</div>
</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="articles in currentPageArticles">
<td>{{articles.idArticles}}</td>
<td>{{articles.artGroupName}}</td>
<td>{{articles.artName}}</td>
<td>{{articles.artPrice}}€</td>
<td>{{articles.egisArtId}}</td>
<td class="articles_active text-center">{{articles.active}}</td>
</tr>
</tbody>
</table>
<footer class="table-footer">
<div class="row">
<div class="col-md-6 page-num-info">
<span>
Zeige
<select data-ng-model="numPerPage"
data-ng-options="num for num in numPerPageOpt"
data-ng-change="onNumPerPageChange()">
</select>
Einträge pro Seite
</span>
</div>
<div class="col-md-6 text-right pagination-container">
<pagination class="pagination-sm"
ng-model="currentPage"
total-items="filteredArticles.length"
max-size="4"
ng-change="select(currentPage)"
items-per-page="numPerPage"
rotate="false"
previous-text="‹" next-text="›"
boundary-links="true">
</pagination>
</div>
</div>
</footer>
</section>
Please help.
The problem you had was that you updating the filteredArticles when searching however you not applying the same in the table. Had a fix on it and here is the Working Plunkr
Code Changed:
HTML:
<tr data-ng-repeat="articles in filteredArticles">
<td>{{articles.idArticles}}</td>
<td>{{articles.artGroupName}}</td>
<td>{{articles.artName}}</td>
<td>{{articles.artPrice}}€</td>
<td>{{articles.egisArtId}}</td>
<td class="articles_active text-center">{{articles.active}}</td>
</tr>
JS:
$http.get('data.json').success(function (data) {
$scope.articles = data;
$scope.filteredArticles = data;
console.log($scope.articles);
})

Resources