I am trying to append results of a search of external .json
here i append the results of a search of an internal javascript array. (with a little help from lodash)
$(document).ready(function () {
$('#dynam-now').click(function () {
let searchString = $('#dynamId').val();
let result = _.filter(fruitChoices, function(object) {
return object.fruit.toLowerCase().indexOf(searchString.toLowerCase()) != -1;
});
$('#ArrayD').html("");
for (var i = 0; i < result.length; i++) {
$('#ArrayD').append(result[i].fruitname + " " + result[i].size + " " + result[i].color + "<br>")
};
});
});
var fruitChoices = [{
"fruit": "apple",
"fruitname" : "Apple",
"size": "Large",
"color": "Red"
},
{
"fruit": "banana",
"fruitname" : "Banana",
"size": "Large",
"color": "Yellow"
},
{
"fruit": "orange",
"fruitname" : "Orange",
"size": "Large",
"color": "Orange"
},
{
"fruit": "strawberry",
"fruitname" : "Strawberry",
"size": "Small",
"color": "Red"
}];
#ArrayD {
margin-top:25%;
font-size: 18px;
font-family: sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
!DOCTYPE html>
<html>
<head>
<title>
Apple
</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://aaronlilly.github.io/CDN/css/bootstrap.min.css">
<!-- Bootstrap JS -->
<script src="https://aaronlilly.github.io/CDN/js/bootstrap.min.js"></script>
<!-- Lodash -->
<script src="https://aaronlilly.github.io/CDN/js/lodash.min.js"></script>
</head>
<body>
<br>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<input type="text" id="dynamId" size="37" placeholder="Search Field" style="margin-left: 50px;margin-top: 10px;padding-bottom: 5px;padding-top: 4px;">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<button class="btn btn-info my-2 my-sm-0" caption="search" id="dynam-now"> Search</button>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div id="ArrayD"> </div>
with my future external .json hosted here - https://aaronlilly.github.io/ApiExample/Apple4/apple4.json
but is written as -
{
"results":
[
{
"fruit": "apple",
"fruitname" : "Apple",
"size": "Large",
"color": "Red"
},
{
"fruit": "banana",
"fruitname" : "Banana",
"size": "Large",
"color": "Yellow"
},
{
"fruit": "orange",
"fruitname" : "Orange",
"size": "Large",
"color": "Orange"
},
{
"fruit": "strawberry",
"fruitname" : "Strawberry",
"size": "Small",
"color": "Red"
}
]
}
I would like to append the filtered search results.
I have tried
$(document).ready(function ()
{
$.ajax
({
method: "GET",
url: " https://aaronlilly.github.io/ApiExample/Apple4/apple4.json"
}).done(function(data)
{$(document).ready(function () {
$('#dynam-now').click(function () {
let searchString = $('#dynamId').val();
let result = _.filter(data, function(object) {
return object.result.toLowerCase().indexOf(searchString.toLowerCase()) != -1;
});
console.log(results.fruit)
$('#ArrayD').html("");
for (var i = 0; i < result.length; i++) {
$('#ArrayD').append(result[i].fruitname + " " + results.result[i].size + " " + result[i].color + "<br>")
};
});
});
console.log(data)
});
});
and get errors such as - Cannot read property 'toLowerCase' of undefined
i have tried to correct this, but not having much luck. any help would be appreciated.
I think there is an issue with your filter function. It should be changed to:
let result = _.filter(data.results, function(object) {
// object = { fruit: 'orange', fruitname: 'ora'...}
return object.fruitname.toLowerCase().indexOf(searchString.toLowerCase()) !== -1;
});
Then result will be an array of matching fruits.
Related
My head was overheated today.. I need help with my code. My English is not so good, so it's hard to explain my issue. So I put problem in HTML what kind of style I need to get from JS. Added things.json file as example, and added JS code.
<!-- What I'm getting: -->
<h2>Table</h2>
<ul>
<li>brown, black, white</li>
</ul>
<!-- What I need to get: -->
<h2>Table</h2>
<ul>
<li>brown</li>
<li>black</li>
<li>white</li>
</ul>
There's example of things.json file:
[
{
"thing": "table",
"color": [
"brown",
"black",
"white"
]
}
{
"thing": "chair",
"color": [
"yellow",
"black",
"blue"
]
}
{
"thing": "bed",
"color": [
"red",
"blue",
"green"
]
}
]
There is example of my function:
const ENDPOINT = 'things.json'
async function getThing(url) {
const resp = await fetch(url)
const data = await resp.json()
data.forEach(appendToHtml) return data
}
getThing(ENDPOINT).then((value) => { console.log('getThings', value) })
function appendToHtml(data) {
const divEl = document.createElement('div')
const h2El = document.createElement('h2')
const liEl = document.createElement('li')
h2El.textContent = data.thing
liEl.textContent = data.color
outputEl.append(divEl)
divEl.append(h2El)
divEl.append(liEl)
return divEl
}
Assuming your json is an array of objects (with colors) you would need 2 levels of loops. One for every item (object) in the array. The other for each object to build the list from its colors (that's also an array).
var arr = [{
"thing": "table",
"color": [
"brown",
"black",
"white"
]
}, {
"thing": "chair",
"color": [
"yellow",
"black",
"blue"
]
}, {
"thing": "bed",
"color": [
"red",
"blue",
"green"
]
}];
var outputEl = document.body;
function appendToHtml(data) {
const divEl = document.createElement('div')
const h2El = document.createElement('h2')
const list_container = document.createElement('div')
h2El.textContent = data.thing
outputEl.append(divEl)
divEl.append(h2El)
divEl.append(list_container)
list_container.innerHTML = appendToList(data.color);
return divEl
}
function appendToList(colors) {
return "<ul>" + colors.map(color=>`<li>${color}</li>`).join("\n") + "</ul>"
}
arr.forEach(function(obj) {
appendToHtml(obj)
})
<body>
</body>
I tried to update the source of Autocomplete, but after I update it, it could not show the list of the source? Did I do anything wrong here?
Here is my set up:
let cities = [
{"label":"Alessandria","id":"AL"},
{"label":"Milano","id":"MI"},
{"label":"Pisa","id":"PI"},
{"label":"Pistoia","id":"PT"}
];
test_auto_c(cities); //For the first time, set up autocomplete.
$("#btn1").click(() => {
let arr = [
{"lable": "Changed1-1", "id": "1"},
{"lable": "Changed1-2", "id": "2"},
{"lable": "Changed1-3", "id": "3"}
];
$("#autocomplete-city").autocomplete('option', 'source', arr); //change the source
});
$("#btn2").click(() => {
let arr = [
{"lable": "Changed2-1", "id": "4"},
{"lable": "Changed2-2", "id": "5"},
{"lable": "Changed2-3", "id": "6"}
];
$("#autocomplete-city").autocomplete('option', 'source', arr); //change the source
});
Below is the function of test_auto_c():
function test_auto_c(arr){
$("#autocomplete-city").autocomplete({
source: arr,
minLength: 0,
select: function(event, ui){
if(ui.item){
return ui.item.label;
}
else{}
},
change: function(event, ui){
var searched = this.value;
if(ui.item){
}
else{
var result = arr.filter(function( obj ) {
return obj.label.toLowerCase().indexOf(searched.toLowerCase()) !== -1;
});
if(result.length>0){
$(this).val(result[0].label);
}
else{
//clear the autocomplete
let final_value = arr[0].label;
$(this).val(final_value);
}
}
}
}).focus(function () {
$(this).autocomplete("search");
});
}
finally, it gives me the result of empty list after I tried to change the source.
What I expect is display like below:
And I am using:
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
First you have to review the docs:
Multiple types supported:
Array: An array can be used for local data. There are two supported formats:
An array of strings: [ "Choice1", "Choice2" ]
An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]
It seems to work and when you then change the source later, it does not work. This is due to a typo, you have "lable" where you need "label".
$(function() {
function test_auto_c(arr) {
$("#autocomplete-city").autocomplete({
source: arr,
minLength: 0
}).focus(function() {
$(this).autocomplete("search");
});
}
let cities = [{
"label": "Alessandria",
"id": "AL"
},
{
"label": "Milano",
"id": "MI"
},
{
"label": "Pisa",
"id": "PI"
},
{
"label": "Pistoia",
"id": "PT"
}
];
test_auto_c(cities);
$("#btn1").click(() => {
let arr = [{
"label": "Changed1-1",
"id": "1"
},
{
"label": "Changed1-2",
"id": "2"
},
{
"label": "Changed1-3",
"id": "3"
}
];
$("#autocomplete-city").autocomplete('option', 'source', arr); //change the source
});
$("#btn2").click(() => {
let arr = [{
"label": "Changed2-1",
"id": "4"
},
{
"label": "Changed2-2",
"id": "5"
},
{
"label": "Changed2-3",
"id": "6"
}
];
$("#autocomplete-city").autocomplete('option', 'source', arr); //change the source
});
});
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<div>
<input type="text" id="autocomplete-city">
<button id="btn1">Btn 1</button>
<button id="btn2">Btn 2</button>
</div>
I am trying to add the below body to JSON. But I only see one value is being added.
json = { "Myname":"Nate", }
Adding the below code:
Body = Myproperty: [{
"vehicle": "car",
"color": "Red"
}, {
"name": "van",
"color": "white"
}, {
"name": "Truck",
"color": "Blue"
}]
Here is the code I am using:
for (var i = 0; i < Myproperty.length; i++) {
json.mycarname = Body.Myproperty[i].name;
json.mycolor = Body.Myproperty[i].color;
}
The end result should look like this:
{
"Myname": "Nate",
mycarname: "car",
"mycolor": "Red"
},
{
"Myname": "Nate",
mycarname: "van",
"mycolor": "white"
},
{
"Myname": "Nate",
mycarname: "Truck",
"mycolor": "Blue"
}
I guess you want to do something like this:
var myName = "Nate";
var Body = [{
"name": "car",
"color": "Red"
},
{
"name": "van",
"color": "white"
},
{
"name": "Truck",
"color": "Blue"
}
]
var json = [];
for (var i = 0; i < Body.length; i++) {
json.push({
"Myname": myName,
"mycarname": Body[i].name,
"mycolor": Body[i].color
});
}
console.log(json)
The idea is to loop over the entries you want to add and push them into the json array.
Our club needs to type members in an input field and have the parent li background color change based on the name lookup in a supporting json file. I would prefer a jquery solution, but javascript is OK!
All is included in the link https://jsfiddle.net/24n2on57/7/
HTML:
<ul id="sortable">
<li id="L01"><input type="text" id="I01"></li>
<li id="L02"><input type="text" id="I02"></li>
<li id="L03"><input type="text" id="I03"></li>
<li id="L04"><input type="text" id="I04"></li>
</ul>
JS:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
var standing = [{
"code": "A",
"background": "#AEF3D4"
},
{
"code": "B",
"background": "#6DDCEA"
},
{
"code": "C",
"background": "#9CC7CC"
},
{
"code": "D",
"background": "#B37F77"
}
];
</script>
<script>
var members = [{
"Class": "A",
"Name": "Bob"
},
{
"Class": "C",
"Name": "James"
},
{
"Class": "D",
"Name": "Thomas"
},
{
"Class": "B",
"Name": "Anthony"
}
]
</script>
<script>
// Lookup background color
function getBackground(name) {
var i = null;
for (i = 0; members.length > i; i++) {
if (members[i].Name === name) {
return standing[i].background;
$(this).css('background-color', standing[i].background);
}
}
return;
};
$("#I01").on("blur", function() {
$("#L01").val(getBackground($(this).val()));
})
$("#I02").on("blur", function() {
$("#L02").val(getBackground($(this).val()));
})
$("#I03").on("blur", function() {
$("#L03").val(getBackground($(this).val()));
})
$("#I04").on("blur", function() {
$("#L04").val(getBackground($(this).val()));
})
</script>
You have to set css instead of val. Also, you had multiple unnecessary style tags in your jsfiddle. I removed them and added the working code here.
For the first list element I added styling using javascript and for the others I used jQuery in-order to show you how to do it in both ways.
var standing = [{
"code": "A",
"background": "#AEF3D4"
},
{
"code": "B",
"background": "#6DDCEA"
},
{
"code": "C",
"background": "#9CC7CC"
},
{
"code": "D",
"background": "#B37F77"
}
];
var members = [{
"Class": "A",
"Name": "Bob"
},
{
"Class": "C",
"Name": "James"
},
{
"Class": "D",
"Name": "Thomas"
},
{
"Class": "B",
"Name": "Anthony"
}
]
$(this).css('background-color', 'red');
function getBackground(name) {
var i = null;
for (i = 0; members.length > i; i++) {
if (members[i].Name === name) {
return standing[i].background;
//$(this).css('background-color', standing[i].background); // Don't put any code after 'return' statement
}
}
return;
}
$("#I01").on("blur", function() {
document.getElementById("L01").style.backgroundColor = getBackground($(this).val());
});
$("#I02").on("blur", function() {
$("#L02").css({"background-color":getBackground($(this).val())});
});
$("#I03").on("blur", function() {
$("#L03").css({"background-color":getBackground($(this).val())});
});
$("#I04").on("blur", function() {
$("#L04").css({"background-color":getBackground($(this).val())});
});
#myDiv,
#intro {
display: table;
width: 30rem;
margin: 2rem auto
}
li {
background: lightgreen;
margin: 1rem;
height: 3rem;
line-height: 3rem;
list-style-type: none;
}
input {
background: #fff;
height: 2rem;
line-height: 2rem;
font-size: 1.5rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="grid-container" style="margin-top:4rem">
<div id="intro">
The color of the list items (default background = "lightgreen") is to be based on the lookup members.Name and return of the standing.background. Valid names are "Bob", "James", "Thomas", and "Anthony". User types in a name, presses tab (onblur) and the
list item background changes to standing.background.
</div>
<div id="myDiv" class="grid-item">
<ul id="sortable">
<li id="L01"><input type="text" id="I01"></li>
<li id="L02"><input type="text" id="I02"></li>
<li id="L03"><input type="text" id="I03"></li>
<li id="L04"><input type="text" id="I04"></li>
</ul> </div>
</div>
Here is the solution for your problem.
var standing = [{
"code": "A",
"background": "#AEF3D4"
},
{
"code": "B",
"background": "#6DDCEA"
},
{
"code": "C",
"background": "#9CC7CC"
},
{
"code": "D",
"background": "#B37F77"
}
];
var members = [{
"Class": "A",
"Name": "Bob"
},
{
"Class": "C",
"Name": "James"
},
{
"Class": "D",
"Name": "Thomas"
},
{
"Class": "B",
"Name": "Anthony"
}
]
$(this).css('background-color', 'red');
function getBackground(name) {
var i = null;
for (i = 0; members.length > i; i++) {
if (members[i].Name === name) {
return standing[i].background;
$(this).css('background-color', standing[i].background);
}
}
return;
};
$('input').on('input', function() {
var input = $(this).val();
$(this).parent().css('background-color', searchMembers(input));
});
function searchMembers(name){
var className = '';
for (var i=0; i < members.length; i++) {
if (members[i].Name === name) {
return searchStanding(members[i].Class);
}
}
}
function searchStanding(className){
for (var i=0; i < standing.length; i++) {
if (standing[i].code === className) {
return standing[i].background;
}
}
}
#myDiv,
#intro {
display: table;
width: 30rem;
margin: 2rem auto
}
li {
background: lightgreen;
margin: 1rem;
height: 3rem;
line-height: 3rem;
list-style-type: none;
}
input {
background: #fff;
height: 2rem;
line-height: 2rem;
font-size: 1.5rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change BG color of list item based on json lookup</title>
</head>
<body>
<div class="container">
<div class="grid-container" style="margin-top:4rem">
<div id="intro">
The color of the list items (default background = "lightgreen") is to be based on the lookup members.Name and return of the standing.background. Valid names are "Bob", "James", "Thomas", and "Anthony". User types in a name, presses tab (onblur) and the
list item background changes to standing.background.
</div>
<div id="myDiv" class="grid-item">
<ul id="sortable">
<li id="L01"><input type="text" id="I01"></li>
<li id="L02"><input type="text" id="I02"></li>
<li id="L03"><input type="text" id="I03"></li>
<li id="L04"><input type="text" id="I04"></li>
</ul </div>
</div>
</body>
</html>
I just changed the JQuery part. All You need is changing the li back ground color depending on name.
var standing = [{
"code": "A",
"background": "#AEF3D4"
},
{
"code": "B",
"background": "#6DDCEA"
},
{
"code": "C",
"background": "#9CC7CC"
},
{
"code": "D",
"background": "#B37F77"
}
];
var members = [{
"Class": "A",
"Name": "Bob"
},
{
"Class": "C",
"Name": "James"
},
{
"Class": "D",
"Name": "Thomas"
},
{
"Class": "B",
"Name": "Anthony"
}
]
function getBackground(name,selector) {
var i = null;
for (i = 0; members.length > i; i++) {
if (members[i].Name == name) {
for (k = 0; standing.length > k; k++) {
if (members[i].Class == standing[k].code) {
$(selector).parent().css('background-color', standing[k].background);
}
}
}
}
return;
};
$("#I01").on("blur", function() {
getBackground($(this).val(),this);
})
$("#I02").on("blur", function() {
getBackground($(this).val(),this);
})
$("#I03").on("blur", function() {
getBackground($(this).val(),this);
})
$("#I04").on("blur", function() {
getBackground($(this).val(),this);
})
Also check the fiddle https://jsfiddle.net/24n2on57/39/
I am building a list control where the user can filter the data. The list control has 4 levels with multiple items. By default the first level item appear only. Once the user clicks the first level, the second is shown and the first is hidden. The user can then click on the second level, in which case the third level will appear and hiding the second one etc..
When I select the first level, then all other first levels need to be hidden as well. Right now when I select the first level then the second appears for all first level items. Once the first level has been selected all other first levels need to be hidden, because the user is going to filter within the first level he selected. In the plunkr below, you will see two departments, if I select "Men", the "Womens" section should be hidden.
The hierarchy is:
Department -> Product Type -> Style -> Color Size Combination
The JSON is already structured in this way:
[
{
"departmentName":"Womens",
"productTypes":[
{
"name":"Standard",
"styles":[
{
"name":"2001",
"details":[
{
"color":"blue",
"size":"m",
"productNum":1234567891212
},
{
"color":"blue",
"size":"x",
"productNum":1234567891212
},
{
"color":"blue",
"size":"xxl",
"productNum":1234567891212
},
{
"color":"blue",
"size":"s",
"productNum":1234567891212
}
]
}
]
}
]
},
{
"departmentName":"Men",
"productTypes":[
{
"name":"Standard",
"styles":[
{
"name":"2001Men",
"details":[
{
"color":"green",
"size":"m",
"productNum":1234567891212
},
{
"color":"green",
"size":"x",
"productNum":1234567891212
},
{
"color":"green",
"size":"xxl",
"productNum":1234567891212
},
{
"color":"green",
"size":"s",
"productNum":1234567891212
}
]
}
]
}
]
}
]
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css">
<script src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app='todo'>
<ion-pane>
<ion-content>
<div class="container padding" style="background-color: #fff;" ng-controller="MyCtrl">
<div class="row">
<div class="col col-100">
<span ng-repeat="f in filter">
{{f}} <i class="icon ion-ios-close-empty"></i>
<i class="icon ion-ios-arrow-thin-right" ng-show="$index < (filter.length-1)"></i>
</span>
</div>
</div>
<div class="list" ng-repeat="item in filterData">
<div class="item item-divider" ng-click="setFilter(item.departmentName, 1);" ng-show="showDepartments">
{{item.departmentName}}
</div>
<div ng-repeat="pt in item.productTypes">
<div class="item item-divider" ng-click="setFilter(pt.name, 2);" ng-show="showProductTypes">
{{pt.name}}
</div>
<div ng-repeat="style in pt.styles">
<div class="item item-divider" ng-click="setFilter(style.name, 3);" ng-show="showStyles">
{{style.name}}
</div>
<div ng-repeat="styleLine in style.details">
<div class="item item-divider" ng-click="setFilter(styleLine, 4);" ng-show="showStyleDetails">
{{styleLine.color}} - {{styleLine.size}}
<br/> {{styleLine.productNum}}
</div>
</div>
</div>
</div>
</div>
</div>
</ion-content>
</ion-pane>
</body>
</html>
And the JS:
angular.module('todo', ['ionic'])
.controller('MyCtrl', function($scope) {
$scope.filter = [];
$scope.showDepartments = true;
$scope.showProductTypes = false;
$scope.showStyles = false;
$scope.showStyleDetails = false;
$scope.setFilter = function(filterValue, level) {
if (level != 4) {
$scope.filter[$scope.filter.length] = filterValue;
} else {
$scope.filter[$scope.filter.length] = filterValue.color;
$scope.filter[$scope.filter.length] = filterValue.size;
}
if (level == 1) {
$scope.showDepartments = false;
$scope.showProductTypes = true;
}
if (level == 2) {
$scope.showProductTypes = false;
$scope.showStyles = true;
}
if (level == 3) {
$scope.showStyles = false;
$scope.showStyleDetails = true;
}
if (level == 4) {
$scope.showStyleDetails = false;
}
}
$scope.title = 'Ionic';
$scope.filterData = [{
"departmentName": "Womens",
"productTypes": [{
"name": "Standard",
"styles": [{
"name": "2001",
"details": [{
"color": "blue",
"size": "m",
"productNum": 1234567891212
}, {
"color": "blue",
"size": "x",
"productNum": 1234567891212
}, {
"color": "blue",
"size": "xxl",
"productNum": 1234567891212
}, {
"color": "blue",
"size": "s",
"productNum": 1234567891212
}]
}]
}]
}, {
"departmentName": "Men",
"productTypes": [{
"name": "Standard",
"styles": [{
"name": "2001Men",
"details": [{
"color": "green",
"size": "m",
"productNum": 1234567891212
}, {
"color": "green",
"size": "x",
"productNum": 1234567891212
}, {
"color": "green",
"size": "xxl",
"productNum": 1234567891212
}, {
"color": "green",
"size": "s",
"productNum": 1234567891212
}]
}]
}]
}];
})
And finally the plunkr:
http://plnkr.co/6YdnId
I got it working. I have used a property on the item itself to hide the first level for all items except the selected item. I have updated the plunkr. Hope this helps somebody.
You should use a filter factory and aplly to your ng-repeat https://docs.angularjs.org/guide/filter