We Keep Coding

Angular 2 filter and toggle function not working as expected

I have created a hamburger menu and there is toggle function for displaying subcategories this toggle function is working fine until i apply filter on them. After searching a category through filter toggle function not working.
this is my html code
<ul class="nav navbar-nav">
<div id="menuToggle" class="sidenav">
<ul id="menu">
<li>
<input class="form-control" type="search" [(ngModel)]="txtToSearch" placeholder="Search"/>
</li>
<li *ngFor="let category of (componentContents.dashboardMenu | dashboardFilter : txtToSearch); let i = index" >
<p class="toggleMenu" (click)="toggleMenu(i,componentContents.dashboardMenu)">{{category.category}}
</p>
<div *ngIf="category.show">
<ul id="{{(category.category).split(' ').join('-')}}" *ngIf="category.subCategory.length > 0">
<li *ngFor="let subCat of category.subCategory">
<a routerLink={{subCat.router}} routerLinkActive="active">
<span class="glyphicon glyphicon-bell" ></span>{{subCat.subcategory}} </a></li>
</ul>
</div>
<hr />
</li>
</ul>
in component.ts im using this code for toggle function
toggleMenu(index, catArry) {
if (catArry[this.prevClicked] && this.prevClicked !== index) {
catArry[this.prevClicked].show = false;
}
catArry[index].show = !catArry[index].show;
this.prevClicked = index;
}

The index variable is applicable only to the current result. So when the filter is applied, the result changes and the index does not correspond to the actual position of element in array.
You can pass the category itself to the toggleMenu(category, catArray) function instead of index and calculate the index in toggleMenu function using catArray.indexOf(category)

Select item from list and send it back to server using Javascript AngularJS

I have a list of items. I want to select them by clicking. Selected item will be sent to server. At a time only one item can be selected. So, for this I need a variable where I can store the item. Please no jQuery. I am looking for simple Javascript AngularJS. Here is my html. After selecting one item, it will automatically go to another list, which I kept in ng-if=false. Suppose, I click on item1 then it will show the list of list1, list2 and list3. Now, let's select list2. Now item1 and list2 will both go to server.
<div ng-if="true"class="items">
<ul ng-if="true">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
<ul ng-if="false">
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</div>
In my fiddle, if I select one date then it should list of dates, which is given ng-if='false'
fiddle link :- http://jsfiddle.net/abhijitloco/k6jso1u3/

Look
function AppController($scope) {
$scope.selectedItem = [];
$scope.clickItem = function(item) {
$scope.selectedItem.push(item);
}
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="AppController">
{{selectedItem}}
<div class="items">
<ul ng-if="true">
<li ng-click="clickItem('Item1');">Item1</li>
<li ng-click="clickItem('Item2');">Item2</li>
<li ng-click="clickItem('Item3');">Item3</li>
</ul>
<ul ng-repeat="obj in selectedItem">
<li>{{obj}}</li>
</ul>
</div>
</div>

<div class="items">
<ul ng-if="!selectedItem" ng-model="selectedItem">
<li ng-click="selectedItem = item1">Item1</li>
<li ng-click="selectedItem = item2">Item2</li>
<li ng-click="selectedItem = item3">Item3</li>
</ul>
<ul ng-if="selectedItem" ng-model="selectedList">
<li ng-click="selectedList = list1">list1</li>
<li ng-click="selectedList = list2">list2</li>
<li ng-click="selectedList = list3">list3</li>
</ul>
</div>
You have selected item in selectedItem model and selected list in selectedList model.

Assuming that yours lists and items are dynamic I would propose something like the following:
constroller:
$scope.lists = [list1, list2, list2...]
$scope.items = [item1, item2, item3...]
$scope.selectItem = function(index){
$scope.selectedItem = $scope.items[index];
};
$scope.sentToServer = function(index){
$scope.lists[index].push($scope.selectedItem);
//send $scope.lists[index] and $scope.selectedItem;
};
view:
<div ng-if="true" class="items">
<ul ng-if="true">
<li ng-click="selectItem($index)" ng-repeat="item in items>{{item}</li>
</ul>
<ul ng-if="selectedItem">
<li ng-click="sendToServer($index)" ng-repeat="lists in lists>{{'list' + $index}</li>
</ul>
</div>

<div ng-if="true"class="items">
<ul ng-repeat='entry in list1'>
<li ng-click='clickMe(entry.name)'>{{entry.name}}</li>
</ul>
<ul ng-repeat='entry1 in list2' ng-if="secondList">
<li ng-click='sendToserver(entry1.name)'>{{entry1.name}}</li>
</ul>
</div>
contorller.js
$scope.optionsSelected = {};
$scope.clickMe = function(text){
$scope.optionsSelected['first'] = text;
$scope.secondList = true; // show second list
// you can initialize second list here OR reset values before it is sent to sever
}
$scope.sendToserver = function(text){
$scope.optionsSelected['second'] =text;
$scope.textSelected = $scope.optionsSelected;
// $scope.textSelected contains both options you just selected.
}

You can do this with couple of ngClick and ngIf directives. For example:
$scope.showType = 1;
$scope.selected = {};
$scope.selectDate = function(date) {
$scope.showType = 2;
$scope.selected.date = date;
};
$scope.selectTime = function(time) {
$scope.selected.time = time;
$http.post('date/selected', $scope.selected); // post wherever you need
};
where in HTML you would have
<ul class="datepicker text-center" ng-if="showType === 1">
<li ng-click="selectDate(date)" ng-repeat="date in dateValues">{{date | date:'EEE dd'}}</li>
</ul>
<ul class="datepicker text-center" ng-if="showType == 2">
<li ng-click="selectTime(time)" ng-repeat="time in timeValues">{{time}}</li>
</ul>
And here is your code updated:
Demo: http://plnkr.co/edit/SjxbyfboJlkLnOeDBhdn?p=preview

Filter matched elements by class name in Angular js.

Problem:
I have an unordered list of items which are returned from a json call and are output using ng-repeat. Each one of these items has a class name (there are about 9 categories).
I have a second unordered list which is simply a list of available categories.
Aim:
I want to be able to select one of the categories in the right hand list, which will apply a filter to the actual list of returned elements. This should be activated via a toggle (so click once: filtered, click again: filter removed). So it is simply looking to match the classname in the clicked element, to the elements that share the same classname in the list of json data.
I cannot use ng-model (as this is reserved for certain form elements).
For my jsfiddle I am simply using static html.
Here is my angular code:
/* angular custom filter on returned ajax api data */
var app = angular.module('app', []);
app.controller('main', function($scope) {
$scope.chFilters = {};
$scope.links = [
{name: 'atm'},
{name: 'internet'},
{name: 'mobile'},
{name: 'sms'},
{name: 'postal'}
];
$scope.channels = ["ATM", "INTERNET", "SMS", "POSTAL","MOBILE"];
});
(this is based on another question I found on SO). Unfortunately the fiddle is a bit messy and has some extraneous code in it.
HTML:
<div ng-app="app">
<div ng-controller="main">
<ul>
<li class="atm">Some stuff ATM</li>
<li class="internet">Some stuff INTERNET</li>
<li class="sms">Some stuff ATM</li>
<li class="atm">Some stuff ATM</li>
<li class="postal">Some stuff POSTAL</li>
<li class="atm">Some stuff ATM</li>
<li class="internet">Some stuff INTERNET</li>
<li class="postal">Some stuff POSTAL</li>
<li class="postal">Some stuff POSTAL</li>
<li class="atm">Some stuff ATM</li>
<li class="sms">Some stuff SMS</li>
<li class="mobile">Some stuff MOBILE</li>
<li class="internet">Some stuff INTERNET</li>
<li class="mobile">Some stuff MOBILE</li>
</ul>
<ul class="channel-filters">
<li ng-repeat="link in links | filter:chFilters" class="{{link.name | lowercase}}"><a ng-click="chFilters.name = link.name">{{link.name | uppercase}}</a></li>
<li class="last" ng-click="chFilters.name = ''">CLEAR FILTER</li>
</ul>
<ul>
<li ng-repeat="channel in channels | filter:chFilters">
<strong>{{channel}}</strong>
<a ng-click="chFilters = channel">{{channel}}</a>
</li>
</ul>
<!-- original -->
<ul>
<li ng-repeat="link in links | filter:chFilters">
<strong>{{link.name}}</strong>
<a ng-click="chFilters.name = link.name">{{link.name}}</a>
</li>
</ul>
</div>
</div>
This is the actual HTML from the application (with the call to the api).
<ul class="accordion">
<li class="search-text-channel">
<input type="textarea" ng-model="searchTextChannel.$" placeholder="Search"/>
</li>
<li ng-repeat="day in interactions.model.byDay | filter:searchTextChannel" ng-click="hidden = !hidden" ng-init="hidden = false" class="{{day.channel | removeSpace | lowercase}}" ng-class="{'closed': !hidden, 'open': hidden}">
<span class="date">{{day.date}}</span>
<span class="subheading">{{day.channel}}</span>
<ul ng-show="hidden">
<li ng-repeat="interaction in day.interactions">
{{interaction.time}} {{interaction.description | removeUnderscore}}
</li>
</ul>
</li>
<li class="load-more">
<i class="fa fa-plus"></i>LOAD MORE
</li>
</ul>
I have managed to recreate this functionality in jquery, but I think it would be better to implement an angular solution in an angular application.
I've tried researching and also attempted to implement show/hide as well as a custom filter, but so far no joy.
Here is my (messy) jsfiddle

<ul>
<li ng-repeat="channel in channels | filter:chFilters.name">
<strong>{{channel}}</strong>
<a ng-click="chFilters = channel">{{channel}}</a>
</li>
</ul>
<!-- original -->
<ul>
<li ng-repeat="link in links | filter:chFilters.name">
<strong>{{link.name}}</strong>
<a ng-click="chFilters.name = link.name">{{link.name}}</a>
</li>
</ul>
Update Plunker
Let me know if you have any question on this.

Here is part of the solution:
Suppose your items look like this:
$scope.items = [
{ class: "atm", label: "Some stuff ATM" },
{ class: "internet", label: "Some stuff INTERNET" },
{ class: "sms", label: "Some stuff SMS" },
{ class: "postal", label: "Some stuff POSTAL" },
...
];
To show a filtered list (only filtering by a single channel for now): create a separate list in the scope, with the filters applied:
$scope.click = function(name) {
$scope.chFilters.name = name;
$scope.filteredItems = $scope.items.filter(function(item) {
return item.class === $scope.chFilters.name;
});
};
Call this click handler from the bottom list:
...<a ng-click="click(link.name)">{{link.name | uppercase}}</a>....
And show filteredItems in the top list:
<ul>
<li ng-repeat="item in filteredItems" ng-class="item.class">{{item.label}}</li>
</ul>
So this is really just a starting point, it should be extended to handle multiple filters, etc...

How to do multiple filters on click event in Angular.Js?

I am showing different articles from the JSON file and I want to filter the articles based on "Category", "Locations", "date". So If I select any category then the result should filtered out based on the specific category and then if I select location then result should be filtered out based on category and location. Please check my running code here "http://plnkr.co/edit/1vcIAPSwvxQcbIzMhyzp?p=preview"
Please check my code html code:
<div ng-controller="ListCtrl">
<h2>By Category</h2>
<ul >
<li ng-repeat="category in categories | filter:{parent: 0}:true | uniqueCategoryFilter">{{category.id}} - {{category.title}} - {{category.parent}}</li>
</ul>
</div>
<div ng-controller="ListCtrl">
<h2>By Location</h2>
<ul >
<li ng-repeat="location in taxonomy_location | uniqueLocationFilter">{{location.title}}</li>
</ul>
</div>
<div ng-controller="ListCtrl">
<h2>By Date</h2>
<ul >
<li ng-repeat="article in posts">{{article.date}}</li>
</ul>
</div>
<div ng-controller="ListCtrl">
<ul ng-repeat="article in posts">
<li><img src="{{article.thumbnail}}" /><h2>{{article.title}}</h2><span >{{article.date | date:'mm/dd/yyyy'}}</span></li>
</ul>
Please check my javascript code here:
function ListCtrl($scope, $http) {
$http({
method: 'GET',
url: 'json_price_1.json'
}).success(function(data) {
$scope.posts = data.posts; // response data
$scope.categories = [];
$scope.taxonomy_location = [];
angular.forEach(data.posts, function(article, index) {
angular.forEach(article.categories, function(category, index){
$scope.categories.push(category);
});
angular.forEach(article.taxonomy_location, function(location, index){
$scope.taxonomy_location.push(location);
});
});
});
}

Angular JS filter not equals

Seems like a very basic question but I can't get the syntax right..
<li class="list-group-item" ng-repeat="question in newSection.Questions | filter:Id != '-1'; " ng-mouseenter="hover = true" ng-mouseleave="hover = false">
<div href="#" editable-text="question.Text">{{question.Text}}</div>
</li>
All I want is to show all the questions where id is NOT -1.
What am I doing wrong. Thanks!

The syntax is just a little off, try:
<li class="list-group-item"
ng-repeat="question in newSection.Questions | filter:{ Id: '!-1'}"
ng-mouseenter="hover = true" ng-mouseleave="hover = false">
<div href="#" editable-text="question.Text">{{question.Text}}</div>
</li>
See a little JSFiddle: http://jsfiddle.net/U3pVM/3845/
Edit:
Example with variables:
<script> var invalidId = '-1'; </script>
<li class="list-group-item"
ng-repeat="question in newSection.Questions | filter:{ Id: '!' + invalidId}"
ng-mouseenter="hover = true" ng-mouseleave="hover = false">
<div href="#" editable-text="question.Text">{{question.Text}}</div>
</li>

Although #Michael Rose answer works for this case, i don't think it will if you try to filter not equal some object/variable
In that case you could use:
JS:
filterId = -1
HTML:
<li ng-repeat="question in newSection.Questions | filter: !{ Id: filterId}">
</li>
An even more nested case:
JS:
someQuestion = {
someObject: {
Id: 1
}
}
newSection.Questions = [someQuestion]
HTML
<li ng-repeat="question in newSection.Questions | filter: !{someObject : {Id: -1} }">
</li>