autocomplete search in ng-repeat in angularjs?

autocomplete search in ng-repeat in angularjs? - javascript

I my code i have 3 ng-repeats based on key press event value i am getting data from service and iam consuming
my html code is:
<div class="input-group" ng-controller="sidemenu">
<input class="form-control" placeholder="Enter location, builder or project" ng-model="NodeId_1" autofocus ng-keyup="getValue($event.keyCode)"/>
<div class="search-datalist" ng-if="showsearch">
<ul ng-if="resultOfBuldDet.length>0">
<span class="result-hd">Builders</span>
<li ng-repeat="bud in resultOfBuldDet" ng-class="{active :2}" ng-click="searchFilter(bud)"><i class="fa fa-map-marker"></i> {{bud.builders_name}}</li>
</ul>
<ul ng-if="resultOfPropDet.length>0">
<span class="result-hd">Properties</span>
<li ng-repeat="prop in resultOfPropDet" ng-click="searchFilter(prop)"><i class="fa fa-map-marker"></i> {{prop.property_name}} ,{{prop.hp_city.city_name}},{{prop.hp_location.location_name}} </li>
</ul>
<ul ng-if="resultOfCityDet.length>0">
<span class="result-hd">cities</span>
<li ng-repeat="city in resultOfCityDet" ng-click="searchFilter(city)"><i class="fa fa-map-marker"> </i> {{city.city_name}}</li>
</ul>
<ul ng-if="resultOfLocaDet.length>0">
<span class="result-hd">Location</span>
<li ng-repeat="loc in resultOfLocaDet" ng-click="searchFilter(loc)"><i class="fa fa-map-marker"></i> {{loc.location_name}},{{loc.hp_city.city_name}}</li>
</ul>
<ul ng-if="resultOfSubLocaDet.length>0">
<span class="result-hd">sub Location</span>
<li ng-repeat="subloc in resultOfSubLocaDet" ng-click=" searchFilter(subloc)"><i class="fa fa-map-marker"></i> {{subloc.sub_location_name}},{{subloc.hp_location.location_name}},{{subloc.hp_location.hp_city.city_name}}</li>
</ul>
</div>
</div>
my controller js code:
sidemenu.controller('sidemenu', ['$scope', '$rootScope', 'allServices'
function(a, b,e) {
a.getValue = function(key) {
if (key == 8 && a.NodeId_1.length <= 2) {
a.resultOfPropDet = "";
a.resultOfBuldDet = "";
a.resultOfLocaDet = "";
a.resultOfCityDet = "";
a.resultOfSubLocaDet = "";
}
if (a.NodeId_1.length > 2) {
e.searchList(a.NodeId_1).then(function(result) {
a.resultOfPropDet = result.data.resultOfPropDet;
a.resultOfBuldDet = result.data.resultOfBuldDet;
a.resultOfLocaDet = result.data.resultOfLocaDet;
a.resultOfCityDet = result.data.resultOfCityDet;
a.resultOfSubLocaDet = result.data.resultOfSubLocaDet;
a.showsearch = true;
}, function(error) {
});
}
}
});
so when i am moving up and down arrows in keyboard.how to highlight the particular rows and trigger the particular function
like this

Related

Text of List item <li> does not reflected correctly after edited click save button from modal pop up in Javascript

I have nested list item of <li> structured as below. What I am trying to do is to edit each item text from pop up modal and reflect change after I clicked on button Save.
However, the first list item I edited is working well, but from the second time onward, it does not work as expected.
$(document).ready(function() {
$('.modal').modal(); // modal
var child;
$('body').on('click', '.fa-pencil', function(e) {
var text = $(this).closest("li").clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text();
child = $(this).closest("li").children();
var li_element = $(this).closest('li');
console.log(li_element);
var dataActive = $(this).closest('li').attr('data-act');
var li_icon = li_element.attr('data-icon');
var modal1 = $('#modal1');
var modalBody = modal1.find('.modal-content');
modalBody.find('h4.itemdes').text('');
modalBody.find('.modalBody').html('');
var modalHeader = modalBody.find('h4.itemdes').attr('contenteditable', true).text(text);
dataActive = $(this).closest('li').attr('data-act') == 'Y' ? 'checked="checked"' : '';
ActiveOpt = '<p><label><input type="checkbox" id="active" class="filled-in" ' + dataActive + ' /><span>Active</span></label></p>';
IconOpt = '<p><i class="' + li_icon + '" id="icon_element" aria-hidden="true"></i></p>';
var datahtml = ActiveOpt + IconOpt;
modalBody.find('.modalBody').html(datahtml);
// modalBody.find('.modalBody').append(IconOpt);
$('body').on('click', '.saveChange', function() {
var textarea = $('.itemdes').text();
var appendItem = textarea;
li_element.text('').empty().append(appendItem).append(child);
// $(this).closest("li").text('').empty().append(appendItem).append(child);
ActiveOpt = '';
IconOpt = '';
// li_element = '';
});
// Function to check li data-Acive
$('body').on('change', '#active', function() {
li_element.removeAttr('data-act');
// console.log(li_element.prop('checked'));
if ($(this).prop('checked')) {
li_element.attr('data-act', 'Y');
// li_element.attr('checked','checked');
} else {
li_element.attr('data-act', 'N');
// li_element.removeAttr('checked');
}
})
});
})
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Materialized CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Modal Trigger -->
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4 style="width: auto; float: left;"><i class="fa fa-pencil-square-o" aria-hidden="true"> </i></h4>
<h4 class="itemdes">Modal Header</h4>
<div class="modalBody">
<p>A bunch of text</p>
</div>
Save
</div>
</div>
<ol class="example example2">
<li data-formdesc="User" data-act="Y" data-icon="fa fa-heart">
<i class="fa fa-heart"></i>User<i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i>
<ol></ol>
</li>
<li data-formdesc="Cash Withdrawal" data-act="Y" data-icon="">
<i class=""></i>Cash Withdrawal<i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i>
<ol></ol>
</li>
<li data-formdesc="Branch1" data-act="Y" data-icon="fa fa-futbol-o">
<i class="fa fa-futbol-o"></i>Branch1<i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i>
<ol>
<li data-formdesc="Customer Centre" data-act="Y" data-icon="">
<i class=""></i>Customer Centre<i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i>
<ol></ol>
</li>
<li data-formdesc="Customers Detail Listing" data-act="Y" data-icon="">
<i class=""></i>Customers Detail Listing<i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i>
<ol></ol>
</li>
</ol>
</li>
<li data-formdesc="2 two" data-act="Y" data-icon="fa fa-linkedin">
<i class="fa fa-linkedin"></i>2 two<i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i>
<ol>
<li data-formdesc="Cash Withdrawal" data-act="Y" data-icon="">
<i class=""></i>Cash Withdrawal<i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i>
<ol></ol>
</li>
<li data-formdesc="Till to Till Transfer" data-act="Y" data-icon="">
<i class=""></i>Till to Till Transfer<i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i>
<ol>
<li data-formdesc="Disbursement Voucher" data-act="Y" data-icon="">
<i class=""></i>Disbursement Voucher<i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i>
<ol></ol>
</li>
</ol>
</li>
<li data-formdesc="Income Posting" data-act="Y" data-icon="">
<i class=""></i>Income Posting<i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i>
<ol></ol>
</li>
</ol>
</li>
</ol>
For example, first time I edit list item 'User' to 'Users', after I clicked on save, the item text changed well. But at second time I edit another item, let's say 'Cash Withdrawal' to 'Cash Withdrawaling', after clicked Save, the item I edited change to 'Cash Withdrawaling', but list item 'Users' that I edited previously, also change to 'Cash Withdrawaling' as well.
I did not know what is incorrect with my JavaScript. How can I correct that? Thanks

At every click on .fa-pencil you add again event listeners to .saveChange and #active, using local variables like li_element, which are scoped to the callback function. This means that the second time you edit an item, two callbacks are executed, but the first still uses the previous value for li_element, thus setting the new value to the previous edited element too.
You should declare all the event listeners once, and move all the needed variables to the same level as var child.
This should work
$(document).ready(function() {
$('.modal').modal(); // modal
var child;
var li_element;
$('body').on('click', '.fa-pencil', function(e) {
var text = $(this).closest("li").clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text();
child = $(this).closest("li").children();
li_element = $(this).closest('li');
console.log(li_element);
var dataActive = $(this).closest('li').attr('data-act');
var li_icon = li_element.attr('data-icon');
var modal1 = $('#modal1');
var modalBody = modal1.find('.modal-content');
modalBody.find('h4.itemdes').text('');
modalBody.find('.modalBody').html('');
var modalHeader = modalBody.find('h4.itemdes').attr('contenteditable', true).text(text);
dataActive = $(this).closest('li').attr('data-act') == 'Y' ? 'checked="checked"' : '';
ActiveOpt = '<p><label><input type="checkbox" id="active" class="filled-in" ' + dataActive + ' /><span>Active</span></label></p>';
IconOpt = '<p><i class="' + li_icon + '" id="icon_element" aria-hidden="true"></i></p>';
var datahtml = ActiveOpt + IconOpt;
modalBody.find('.modalBody').html(datahtml);
// modalBody.find('.modalBody').append(IconOpt);
});
$('body').on('click', '.saveChange', function() {
var textarea = $('.itemdes').text();
var appendItem = textarea;
li_element.text('').empty().append(appendItem).append(child);
// $(this).closest("li").text('').empty().append(appendItem).append(child);
ActiveOpt = '';
IconOpt = '';
// li_element = '';
});
// Function to check li data-Acive
$('body').on('change', '#active', function() {
li_element.removeAttr('data-act');
// console.log(li_element.prop('checked'));
if ($(this).prop('checked')) {
li_element.attr('data-act', 'Y');
// li_element.attr('checked','checked');
} else {
li_element.attr('data-act', 'N');
// li_element.removeAttr('checked');
}
})
})

How to disable a list item based on condition - ASP.NET C#

I am looking for some advice on the best way to disable two list items based on the account being locked and the value in the state column is equal to 1.
I have a model which generates a random number:
public int IsLocked
{
get
{
var rnd = new Random();
return rnd.Next(0, 2);
}
}
This is my Partial View:
<td class="hidden-xs hidden-sm">
#if (t.IsLocked == 1)
{
<span class="glyphicon glyphicon-lock locked"></span>
}
else
{
<span class="glyphicon glyphicon-ok"></span>
}
</td>
<td class="updateTableRow text-center">
<div class="dropdownContainer btn-group text-right">
<button id="#actionWorkId" type="button" class="btn btn-primary br2 btn-xs fs12 dropdown-toggle songmanagement-btn" data-toggle="dropdown" aria-expanded="false">
Action
<span class="caret ml5"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>
<a href="#Url.Action("Recordings", "ArtistAccount", new
{
accountcode = fullAccountCode,
songcode = t.SongId
})" id="#recordingWorkId" data-container="body" data-rowhover="editTableRow" class="js_Recordings">Recordings</a>
</li>
<li>
<a href='#Url.Action("EditSong", "ArtistAccount", new
{
songcode = t.SongId,
accountcode = fullAccountCode,
page = Model.PagingInfo.Page,
take = Model.PagingInfo.Take,
sortBy = Model.PagingInfo.SortPropertyName,
sortAsc = Model.PagingInfo.SortAscending
})' id="#editWorkId" data-container="body" data-rowhover="editTableRow" class="js_EditSong">Edit</a>
</li>
<li>
Delete
</li>
<li>
<a href="#Url.Action("TuneCodes", "ArtistAccount", new
{
accountCode = fullAccountCode,
workCode = t.SongId,
})" id="#tuneCodeId" data-container="body" data-toggle="tooltip" title="Tune Codes" data-rowhover="editTableRow">Tune Codes</a>
</li>
</ul>
</div>
</td>
</tr>
Is there a way using C# and ASP.NET that I could acheieve this?

Solved my issue using the following code:
<li>
#if (t.IsLocked == 1)
{
<a class="isDisabled" data-toggle="tooltip" title="You cannot edit this song until pending writer edits are approved">Recordings</a>
}
else
{
<a href="#Url.Action("Recordings", "ArtistAccount", new
{
accountcode = fullAccountCode,
songcode = t.SongId
})" id="#recordingWorkId" data-container="body" data-rowhover="editTableRow" class="js_Recordings">Recordings</a>
}</li>
<li>
#if (t.IsLocked == 1)
{
<a class="isDisabled" data-toggle="tooltip" title="You cannot edit this song until pending writer edits are approved">Edit</a>
}
else
{
<a href='#Url.Action("EditSong", "ArtistAccount", new
{
songcode = t.SongId,
accountcode = fullAccountCode,
page = Model.PagingInfo.Page,
take = Model.PagingInfo.Take,
sortBy = Model.PagingInfo.SortPropertyName,
sortAsc = Model.PagingInfo.SortAscending
})'
id="#editWorkId" data-container="body" data-rowhover="editTableRow" class="disabled">Edit</a>
}

Foreach: Toggle each icon - KnockoutJS

I am trying to toggle the plus symbol to minus sign, once after immediately that section get clicked and expanded. Following the code I have tried.
<div>
<ul style="list-style: none">
<li data-bind="foreach: model">
<div id="panelHeading">
<i class="fa fa-plus" style="padding-right: 5px;">+</i>
<span data-bind="text: Main"></span>
</div>
<div id="panelContent" data-bind="if: show">
<ul id="clustersList" data-bind="foreach: Sub" style="list-style: none">
<li><span style="padding-left: 20px;" data-bind="text: $data"></span></li>
</ul>
</div>
</li>
</ul>
</div>
=== JS ====
var viewModel = function() {
var self = this;
self.model = ko.observableArray([{
Main: "Main1",
Sub: ["hello", "hi"],
show: ko.observable(false)
}, {
Main: "Main2",
Sub: ["one", "two"],
show: ko.observable(false)
}]);
self.toggleShow = function (item) {
$('this a').find('i').toggleClass('fa fa-plus fa fa-minus');
var index = self.model.indexOf(item);
if (item.show())
self.model()[index].show(false);
else
self.model()[index].show(true);
}
}
ko.applyBindings(new viewModel());
Please check my Fiddle here.
Any suggestion would be helpful.

Just change your HTML to apply the correct style based on the current value of show:
<i class="fa" data-bind="css: { 'fa-plus': !show(), 'fa-minus': show() }"></i>
And in your JS:
self.toggleShow = function (item) {
item.show(!item.show());
};
See Fiddle

Angular date filter on ng-click

I want to filter the records by the reply time monthly. If I click a date on the left menu. The table should display the records only in that specific month. I have a search filter also.
The current reviews date are displayed on the left which serve as filter on ng-click. Is it possible for the dates in the left to be dynamic base on the reply time. the reply time is in the third column of the tabl which is a string date from JSON array.
My Script:
<script>
(function() {
'use strict';
angular
.module('myApp', [])
.constant('STATUS', {
0: 'Stable',
1: 'Normal',
2: 'Serious'
})
.controller('historyCtrl', historyCtrl);
historyCtrl.$inject = ['$scope', 'STATUS'];
function historyCtrl($scope, STATUS) {
$scope.sortType = 'sportorderreply.replyTime'; // set the default sort type
$scope.sortReverse = true; // set the default sort order
$scope.sortId = false;
$scope.sortRD = false;
$scope.sortRT = false;
$scope.sortStatus = false;
$scope.orderHistory = [{
"orderID":"123",
"purchaseTime":1437536718345,
"sportorderreply":{
"memberId":"123123",
"orderStatus":1,
"replyTime":"2016/06/04 08:30:40"
}
},
{
"orderID":"123",
"purchaseTime": 1437536718345,
"sportorderreply":{
"memberId":"123123",
"orderStatus":2,
"replyTime":"2016/08/04 08:30:40"
}
},
{
"orderID":"123",
"purchaseTime": 1437536718345,
"sportorderreply":{
"memberId":"123123",
"orderStatus":0,
"replyTime":"2016/07/04 08:30:40"
}
},
];
$scope.currentPage = 1;
$scope.currentYear = new Date().getFullYear();
$scope.search = function (order){
if ($scope.searchReview === undefined) return true;
if (order.sportorderreply.orderStatus.indexOf($scope.searchReview)!=-1 || order.purchaseTime.indexOf($scope.searchReview)!=-1 || order.sportorderreply.replyTime.indexOf($scope.searchReview)!=-1) {
return true;
}
return false;
};
function parseProperties() {
$scope.orderHistory.map(function(order) {
order.sportorderreply.orderStatus = STATUS[order.sportorderreply.orderStatus];
var date = new Date(order.purchaseTime);
var d = date.getDate();
var m = date.getMonth() + 1;
var y = date.getFullYear();
var dateString = y + '/' + (m <= 9 ? '0' + m : m) + '/' + (d <= 9 ? '0' + d : d);
order.purchaseTime = dateString;
var newRT = new Date(order.sportorderreply.replyTime);
order.sportorderreply.replyTime = newRT;
return order;
});
}
parseProperties();
}})();
</script>
HTML:
<div id="accordion">
<h4 class="accordion-toggle activeAccordion"><p>Current reviews (120)</p></h4>
<div class="accordion-content default">
<ul ng-init="currentYear = {{currentYear}}">
<li ng-click="monthFilter={'filterMonth':'December'};yearFilter={'filterYear': currentYear} "> Dec. (50)</li>
<li ng-click="monthFilter={'filterMonth':'November'};yearFilter={'filterYear': currentYear} "> Nov. (50)</li>
<li ng-click="monthFilter={'filterMonth':'October'};yearFilter={'filterYear': currentYear} "> Oct. (50)</li>
<li ng-click="monthFilter={'filterMonth':'September'};yearFilter={'filterYear': currentYear} "> Sep. (50)</li>
<li ng-click="monthFilter={'filterMonth':'August'};yearFilter={'filterYear': currentYear} "> Aug. (50)</li>
<li ng-click="monthFilter={'filterMonth':'July'};yearFilter={'filterYear':currentYear}">Jul. (54)</li>
<li ng-click="monthFilter={'filterMonth':'June'};yearFilter={'filterYear':currentYear}">Jun. (30)</li>
<li ng-click="monthFilter={'filterMonth':'May'};yearFilter={'filterYear':currentYear}">May. (34)</li>
<li ng-click="monthFilter={'filterMonth':'April'};yearFilter={'filterYear':currentYear}">Apr. (20)</li>
<li ng-click="monthFilter={'filterMonth':'March'};yearFilter={'filterYear':currentYear}">Mar. (58)</li>
<li ng-click="monthFilter={'filterMonth':'February'};yearFilter={'filterYear':currentYear}">Feb. (59)</li>
<li ng-click="monthFilter={'filterMonth':'January'};yearFilter={'filterYear':currentYear}">Jan. (56)</li>
</ul>
</div>
<h4 class="accordion-toggle secondAcc"><p>2015 reviews (650)</p></h4>
<div class="accordion-content secondAcc">
<ul ng-init="lastYear = {{lastYear}}">
<li ng-click="monthFilter={'filterMonth':'December'};yearFilter={'filterYear': lastYear} "> Dec. (50)</li>
<li ng-click="monthFilter={'filterMonth':'November'};yearFilter={'filterYear': lastYear} "> Nov. (50)</li>
<li ng-click="monthFilter={'filterMonth':'October'};yearFilter={'filterYear': lastYear} "> Oct. (50)</li>
<li ng-click="monthFilter={'filterMonth':'September'};yearFilter={'filterYear': lastYear} "> Sep. (50)</li>
<li ng-click="monthFilter={'filterMonth':'August'};yearFilter={'filterYear': lastYear} "> Aug. (50)</li>
<li ng-click="monthFilter={'filterMonth':'July'};yearFilter={'filterYear':lastYear}">Jul. (54)</li>
<li ng-click="monthFilter={'filterMonth':'June'};yearFilter={'filterYear':lastYear}">Jun. (30)</li>
<li ng-click="monthFilter={'filterMonth':'May'};yearFilter={'filterYear':lastYear}">May. (34)</li>
<li ng-click="monthFilter={'filterMonth':'April'};yearFilter={'filterYear':lastYear}">Apr. (20)</li>
<li ng-click="monthFilter={'filterMonth':'March'};yearFilter={'filterYear':lastYear}">Mar. (58)</li>
<li ng-click="monthFilter={'filterMonth':'February'};yearFilter={'filterYear':lastYear}">Feb. (59)</li>
<li ng-click="monthFilter={'filterMonth':'January'};yearFilter={'filterYear':lastYear}">Jan. (56)</li>
</ul>
</div>
</div>
<body>
<div id="table-div-id-history" ng-app="myApp" ng-controller="historyCtrl">
<input type="text" id="livefilter-input" class="searchHistory" placeholder="Keyword" ng-model="searchReview">
<div class="divs" ng-repeat="order in orderHistory|orderBy:sortType:sortReverse| filter:search | filter:yearFilter | filter:monthFilter track by $index" >
<div >
<ul class="historyTableData">
<li><p class="table-data1-h">{{$index+1}}</li>
<li><p class="table-data2-h" ng-bind="order.purchaseTime"> </p></li>
<li><p class="table-data3-h">{{ order.sportorderreply.replyTime | date: 'yyyy/MM/dd, HH:mm'}}</p></li>
<li><p class="table-data4-h">XDCFG0006</p></li>
<li><p class="table-data5-h historyStatus" ng-bind="order.sportorderreply.orderStatus"></p></li>
<!--<li></li>-->
</ul>
</div>
</div>
</div>

Opening specific list in angular JS

I'm using the following code to try ng-repeat in angular. I need to show the list which I click. But when I click on the symbol ~, it is showing all the lists.
How can I specify such conditions when using ng-repeat?
HTML
<div ng-app='myapp' ng-controller='cntrl'>
<input ng-model="addy" />
<button ng-click="add()" class="w3-btn w3-padding w3-blue">Add</button>
<span ng-show='span' style='color:red'>The TeXt Is AlReAdY In ThE LiSt</span>
<ul class="w3-ul">
<li ng-repeat="x in names" class="w3-padding-hor-16">
<span ng-click="expand()">~{{x}}
<ul ng-show='show'>
<li ng-repeat="Y in features[$index]">{{Y}}</li>
</ul>
</span>
</li>
</ul>
</div>
Angular JS
<script>
var app = angular.module('myapp',[]);
app.controller('cntrl', function($scope){
$scope.names = ['Fruits', 'Veggies', 'Cars'];
$scope.show= false ;
$scope.features=[['Apple','Mango','Lemon','Grapes'], ['Tomato', 'Carrot', 'Cucumber'], ['Porsche', 'Aston', 'Dodge']];
$scope.expand=function(){
$scope.show = !$scope.show;
}
$scope.add = function(){
$scope.span = false
if($scope.names.indexOf($scope.addy) === -1)
$scope.names.push($scope.addy);
else
$scope.span = true;
}
});
</script>

Pls check it out
var app = angular.module('myapp',[]);
app.controller('cntrl', function($scope){
$scope.names = ['Fruits', 'Veggies', 'Cars'];
$scope.show= false ;
$scope.features=[['Apple','Mango','Lemon','Grapes'], ['Tomato', 'Carrot', 'Cucumber'], ['Porsche', 'Aston', 'Dodge']];
$scope.expand=function(index){
$scope.expanded = ($scope.expanded != index)?index:-1;
}
$scope.add = function(){
$scope.span = false
if($scope.names.indexOf($scope.addy) === -1)
$scope.names.push($scope.addy);
else
$scope.span = true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myapp' ng-controller='cntrl'>
<input ng-model="addy" />
<button ng-click="add()" class="w3-btn w3-padding w3-blue">Add</button>
<span ng-show='span' style='color:red'>The TeXt Is AlReAdY In ThE LiSt</span>
<ul class="w3-ul">
<li ng-repeat="x in names" class="w3-padding-hor-16">
<span ng-click="expand($index)">~{{x}}
<ul ng-show='expanded == $index'>
<li ng-repeat="Y in features[$index]">{{Y}}</li>
</ul>
</span>
</li>
</ul>
</div>

Develop Reference

JavaScript is the programming language of the Web.

autocomplete search in ng-repeat in angularjs? - javascript

Related

Text of List item <li> does not reflected correctly after edited click save button from modal pop up in Javascript

How to disable a list item based on condition - ASP.NET C#

Foreach: Toggle each icon - KnockoutJS

Angular date filter on ng-click

Opening specific list in angular JS

Categories

Resources