I've made a list who's content is loaded via AJAX, and it works as intended.
I'd now like to make each list entry load (via AJAX) and display a sublist, when clicked upon.
Is this possible in AngularJS? (I'm new to AngularJs and am more than a little confused over $scope.)
<div ng-controller="StockGroupCtrl">
<ul>
<li ng-repeat="group in groups">
<span>{{group.prod_grp}}</span>
<span>{{group.desc}}</span>
<!-- something like
<ul ng-controller="WhatShouldItBe?">
<li ng-repeat="item in items">
<span>{{item.name}}</span>
<span>{{item.price}}</span>
</li>
</ul>
-->
</li>
</li>
</div>
I've made the outer code work with:
function StockGroupCtrl($scope, $http) {
$scope.groups = [];
$scope.handleGroupsLoaded = function(data, status) {
$scope.groups = data;
}
$scope.fetch = function() {
$http.get('/api/stock/groups/').success($scope.handleGroupsLoaded);
}
$scope.fetch();
}
but I can't really see where to start with the inner lists.
How about this? You don't need another controller.
<ul>
<li ng-repeat="item in group.items">
<span>{{item.name}}</span>
<span>{{item.price}}</span>
</li>
</ul>
Related
i have two dimensional array like this:
Array that i get back from Api Call
and i want to loop through via VueJS here is my Code:
<ul>
<li v-for="topCat in allCats" :key="topCat.id">
<li v-for="subCat in topCat" :key="subCat.id">
{{subCat.name}}
</li>
</li>
</ul>
data: function() {
return {
allCats: {},
}
},
mounted() {
axios.get('/api/getAllCats')
.then(response => {
this.allCats = response.data.allCats;
console.log(this.allCats);
})
}
and this is the error code that i can see in the browser console:
"Property or method "topCat" is not defined on the instance but referenced during render."
Does anyone know how i can fix that?
Try out to get access to the sub_cats inside the nested loop :
<ul>
<li v-for="topCat in allCats" :key="topCat.id">
<ul>
<li v-for="subCat in topCat.sub_cats" :key="subCat.id">
{{subCat.name}}
</li>
</ul>
</li>
</ul>
I am using the below code. The AJAX GET is returning status code 500. I am not sure what is missing.
<div class="container pt-1" id="usersList">
<h5>List of Users</h5>
<div data-bind="users.list__template">
<ul class="list-group">
#{foreach user in model}
<a class="userList" href=/#{user._id}> <li class="list-group-item">#{user.name}</li></a>
#{end}
</ul>
</div>
</div>
$('#usersListLink').on('click', (event) => {
event.preventDefault();
AJAX('GET /usersList', 'items --> usersList.items');
$("#homepage").hide();
$("#usersList").show();
$("#addUser").hide();
});
It's hard to say just from what you shown.
But on the controllers check the route, it looks it could be flag with some role permits.
F.route('/uesrslist', get_platform, ['authorize', '#role']);
This could be different depending on how your project is created.
I have a menu in a PHP page:
<li data-target='MA'><span>M.A.</span></li>
<li data-target='MBA'><span>M.Com.</span></li>
<li data-target='MBA'><span>B.E.</span></li>
and I have content:
<p id="MA" class='content'>MA</p>
<p id="MCOM" class='content'>MCOM</p>
<p id="BE" class='content'>BE</p>
I have to selectively show the content. How do I do it?
You need to search for javascript solution.
For example look on the answer to this question:
Responsive menu show and hide on click
Solution:
function switchContent(id) {
var content = $(('#' + id));
$('.content').not(content).hide();
content.show();
}
function handleHash() {
switchContent(location.hash.substring(1));
}
window.onhashchange = handleHash;
$(handleHash);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li data-target='MA'><a class='link' href="#MA"><span>M.A.</span></a></li>
<li data-target='MCOM'><a class='link' href="#MCOM"><span>M.Com.</span></a></li>
<li data-target='BE'><a class='link' href="#BE"><span>B.E.</span></a></li>
<p id="MA" class='content'>MA</p>
<p id="MCOM" class='content'>MCOM</p>
<p id="BE" class='content'>BE</p>
I am using protractor to test my site. I countered a problem.
I have a ul, the number of li inside is dynamic,
<ul>
<li class='listing-item'>
<div class='prod-price'>$99</div>
</li>
<li class='listing-item price-onsale'>
<div class='prod-price'>$99</div>
<div class='prod-saving'>$10</div>
</li>
<li class='listing-item'>
<div class='prod-price'>$50</div>
</li>
...
</ul>
The 'prod-saving' div will only show up when 'price-onsale' class is present. I want to use protractor to test this logic, is there a way to do it? something like:
expect(elment(by.className('price-onsale').isPresent()).toBe(true).when('price-onsale).isPresent();
Your syntax will work almost word-for-word if you rearrange it a bit:
element(by.className('price-onsale')).isPresent().then(function(present) {
if(present) {
expect(element(by.className('prod-saving')).isPresent()).toBe(true);
}
});
It's a matter of testing the pre-condition first, and then testing the main condition based on the result of the first.
I need some help about creating more HoverCards with this plugin (download). I just created a code demo on JSFiddle. Do you have any recommendations about this?
JavaScript:
$('.babe-hover').hovercard({
detailsHTML: $(this).attr('data-control').html(),
width:278
});
HTML:
<ul class="demo">
<li>
<span class="babe-hover" data-control="control-01">William Johnson</span>
<div id="control-01" style="display: none;">
<p class="s-desc">Address: 64 Newman Street.</p>
<ul class="s-stats">
<li>Tweets<br><span class="s-count">1337</span></li>
</ul>
</div>
</li>
<li>
<span class="babe-hover" data-control="control-02">Hanson Thomas</span>
<div id="control-02" style="display: none;">
<p class="s-desc">Address: 64 Newman Street.</p>
<ul class="s-stats">
<li>Tweets<br><span class="s-count">1337</span></li>
</ul>
</div>
</li>
Now it working with some help from the author
$('.babe-hover').each(function(){
var $this = $(this),
myControlId = $this.attr('data-control'),
htmlForHovercard = $('#'+ myControlId).html();
$this.hovercard({
detailsHTML: htmlForHovercard,
width:278
});
});
anyway thank #egasimus for ur suggest :)
I suppose you're asking: why doesn't this work?
You're trying to call the .html() method on what $(this).attr('data-control') returns. $(this).attr('data-control'), however, only returns a string, and you need to obtain the corresponding element in order to use .html(). The following code works for me:
$("#" + $(this).attr('data-control')).html()
I.e., "select the element whose id equals this element's data-control attribute, and call .html() on it."