I am having trouble getting my tab content to appear properly on page load. What I have is a factory of Objects called apiList, I then use two ng-repeats, one which hits each object in the apiList, then the next one which iterates through that object and puts all of its data on the page. I use #tab{{$index}} to keep my data-toggles aligned between the buttons and tab-panes.
The problem seems to be with how I use the active attribute on my tab-pane.
I have three known test cases so far.
I can only get information from the first Object by using the condition ng-class="{ 'active': $index == 0}" as in..
<div ng-repeat="(key, data) in apiList[0]" class="tab-pane active" id="tab{{$index}}" ng-class="{ 'active': $index == 0}">
If I remove the conditional from the line then nothing appears
And if I just add active to the pane value (with no condition)
(i.e. <div ng-repeat="(key, data) in apiList[0]" class="tab-pane active" id="tab{{$index}}"> They all appear.
So my problem seems to be with how I need to turn on/off my active for the ng-repeat and I am just getting lost.
Also, clicking on accounts/customers does not update the tabs. They both have the right data-toggle ID's (0 and 1) in respect to the tab-panes so I assume it is part of the active issue. And whenever I click on my tab panes, they do expand just fine.
Here is my Factory, ng-repeat(s), and the code that was my original setup (functional).
Factory
.factory('APIMethodService', [function() {
var Head = "api.verifyvalid";
return {
apis: [
{
accounts: [
{
parameters : [
{
name : "Accounts",
version : "1.0"
}
],
uri: Head + "/v1/accounts/account_number",
methods : [
{
name: "Account Number",
desc: "Returns the account number."
}, {
name: "Account Money",
desc: "Returns the monetary amount within the account."
}
]
},
{
parameters : [
{
name : "Accounts",
version : "2.0"
}
],
uri: Head + "/v2/accounts/account_number",
methods: [
{
name: "Account Number",
desc: "Returns the account number."
}, {
name: "Account Money",
desc: "Returns the monetary amount within the account."
}, {
name: "Account Token",
desc: "Returns the account's token."
}
]
}
],
customers:[
{
parameters : [
{
name : "Customers",
version : "1.0"
}
],
uri: Head + "/v1/customers/customer_number",
methods : [
{
name: "Customer Name",
desc: "Returns the customer's name."
}, {
name: "Customer ID",
desc: "Returns the customer's ID."
}
]
},
{
parameters : [
{
name : "Customers",
version : "2.0"
}
],
uri : Head + "/v2/customers/customer_number",
methods: [
{
name: "Customer Name",
desc: "Returns the customer's name."
}, {
name: "Customer ID",
desc: "Returns the customer's ID."
}, {
name: "Customer Email",
desc: "Returns the customer's email."
}
]
}
]
}
]
};
ng-repeat (just the right-hand tabs)
<div class="col-md-9">
<div class="tab-content">
<div ng-repeat="(key, data) in apiList[0]" class="tab-pane active" id="tab{{$index}}">
<div ng-repeat="api in apiList[0][key]">
<div class="panel panel-info" id="panel{{$index}}">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapse{{key}}{{$index}}" class="collapsed">
{{api.uri}}<i class="newTab" ng-click="apiTab(api)">(Open in new tab)</i>
</a>
</h4>
</div>
<div id="collapse{{key}}{{$index}}" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr ng-repeat="method in api.methods">
<td>{{method.name}}</td>
<td>{{method.desc}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The following code is what I originally had, before trying to crunch it down more
<div class="col-md-9" style="display:none">
<div class="tab-content">
<!-- Accounts -->
<div class="tab-pane active" id="tab0">
<div ng-repeat="api in apiList[0].accounts">
<div class="panel panel-info" id="panel0">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseAccountsV{{$index}}" class="collapsed">
{{api.uri}}
</a>
<i class="newTab" ng-click="apiTab(api)">(Open in new tab)</i>
</h4>
</div>
<div id="collapseAccountsV{{$index}}" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr ng-repeat="method in api.methods">
<td>{{method.name}}</td>
<td>{{method.desc}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Customers -->
<div class="tab-pane" id="tab1">
<div ng-repeat="api in apiList[0].customers">
<div class="panel panel-info" id="panel1">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseCustomersV{{$index}}" class="collapsed">
{{api.uri}}<i class="newTab" ng-click="apiTab(api)">(Open in new tab)</i>
</a>
</h4>
</div>
<div id="collapseCustomersV{{$index}}" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr ng-repeat="method in api.methods">
<td>{{method.name}}</td>
<td>{{method.desc}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Other -->
<div class="tab-pane fade" id="tab3">
<!-- TBA -->
</div>
</div>
</div>
Noob mistake, everything works fine! I was using my old code as the base outline on the same page and had set that old code to style="display:hidden" but this still meant that the ID's were apart of the DOM, hence why I couldn't change my tab's properly (duplicate/conflicting ID's).
Related
I want to make a list of projects and I made an array and using .map() method to display them, and I'm adding that list in the HTML element using .insertAdjacentHTML() method.
While inspecting the elements I can see the image path is coming fine but image is not showing in UI. What would be the reason of it?
const projectData = [
{
id: 01,
title: "Project 1",
url: "https://react-projects-1/",
imageUrl: "src/img/projects/project-1.png", //is it wrong using like this
description: "This is project 1 desc",
},
{
id: 02,
title: "Project 2",
url: "https://react-projects-2/",
imageUrl: "src/img/projects/project-2.png", //is it wrong using like this
description: "This is project 2 desc",
},
];
Mapping them and using the HTML:-
const projectHTML = projectData.map((el) => {
return `<div class="row align-items-center project_row">
<div class="col-md-5 col-12 order-md-2">
<a href="${el.url}" class="thumb">
<img
src="${el.imageUrl}"
class="w-100"
alt="${el.title}"
target="_blank"
/>
</a>
</div>
<div class="col-md-7 col-12 order-md-1 mt-4 mt-md-0">
<h3><span>${el.id}.</span>${el.title}</h3>
<p>
${el.description}
</p>
<ul class="buildTech">
<li><i class="fa-brands fa-react"></i> React</li>
</ul>
View
</div>
</div>`;
});
workWrapper.insertAdjacentHTML("afterbegin", projectHTML);
Inspect:-
Bootstrap's Collapse components require sections (or cards) with unique id to enable collapsing / decollapsing each section independently. I am trying to create multiple sections equal to the amount of data points using "v-for" from vue.js. However, I don't know how to automatically generate unique ids for the cards. this is what I tried:
<div id = "story-content" class="content">
<div v-for="(subchapter, chapter) in story" class="card">
<div class="card-header">
<a href = "'collapse' + generateNewId" class="card-link" data-toggle="collapse" >
[[chapter]]
</a>
</div>
<div id = "'collapse' + getCurrentId" class="collapse show" data-parent="#story-content" >
<div class="card-body">
[[subchapter]]
</div>
</div>
</div>
</div>
<script>
var story = {{story | safe}};
var app = new Vue({
delimiters: [ '[[', ']]'],
el: '#portofolio',
data: {
story: story,
uniqueId: 0,
},
methods: {
generateNewId: function() {
return uniqueId + 1;
},
getCurrentId: function() {
return uniqueId;
}
}
})
</script>
Example of the story data structure:
{
"Chapter1": {
"Subchapter1": {
"side_note": "January - June 2019",
"desc": "description here"
},
"Subchapter2": {
"side_note": "January - June 2019",
"desc": "description here"
}
},
"Chapter2": {
"Subchapter1": {
"side_note": "",
"desc": ""
}
}
}
P.S I am not using bootstrap-vue since I did not know its existence until in the middle of my learning. I'm a beginner in web development. Hopefully there is a way to solve this issue without the need of bootstrap-vue as I will need to modify other components as well.
Bootstrap 4 uses jQuery for the Collapse component. So, one way to solve it is to simply use the Chapter keys as the unique id's...
<div id="story-content" class="content">
<div v-for="(subchapter, chapter) in story" class="card">
<div class="card-header">
<a :href="'#collapse' + chapter" :data-target="'#collapse' + chapter" class="card-link"
data-toggle="collapse"> [[chapter]] </a>
</div>
<div :id="'collapse' + chapter"
class="collapse show" data-parent="#story-content">
<div class="card-body"> [[subchapter]] </div>
</div>
</div>
</div>
Demo: https://codeply.com/p/0DEYVY4HUA
However, using jQuery with Vue isn't desirable, so a better way would be to recreate the collapse behavior in Vue as explained here
I'm using Bootstrap 4 on the front end, and a simple template literal to pass my strings. It's outputting the columns into their own individual rows, and I don't understand why.
const bodList = [
{
image: "https://placekitten.com/450/600",
name: "First Last",
profile: "https://www.google.com",
termExp: "2023",
title: "Chief Guy",
company: "The Company"
},
{
image: "https://placekitten.com/450/600",
name: "First Last",
profile: "https://www.google.com",
termExp: "2023",
title: "Chief Guy",
company: "The Company"
},
{
image: "https://placekitten.com/450/600",
name: "First Last",
profile: "https://www.google.com",
termExp: "2023",
title: "Chief Guy",
company: "The Company"
}
];
function bodTemplate(bod) {
return `
<div class="col-md-4 col-lg-3">
<div class="card border-0">
<img src="${bod.image}" class="card-img-top" alt="${bod.name}">
<div class="card-body pl-0">
<h5 class="card-title">${bod.name} <span class="text-right">${bod.termExp}</span></h5>
<h6 class="card-title">${bod.title}</h6>
<h6 class="card-title"><span class="text-muted font-weight-bold">${bod.company}</span></h6>
</div>
</div>
</div>
`;
}
document.getElementById("boardDirectors").innerHTML = `
${bodList.map(bodTemplate).join(" ")}
`;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<div class="container-fluid">
<div class="row no-gutters">
<div id="boardDirectors"></div>
</div>
</div>
It's a bootstrap / CSS issue, rather anything related to the fact you've used template literals.
It appears that by having an extra <div> in between the row div and the col divs, you've broken the link between those two (in bootstrap's mind at least), so it doesn't treat those columns as columns. I haven't checked the source but I'd guess it's related to how the CSS rules are defined, perhaps a strict hierarchy is required.
Anyway the simple solution is to remove that div and shift the id="boardDirectors attribute onto the row div.
I also removed the no-gutters class to stop the images bunching up next to each other - now it allows some space in between them.
const bodList = [
{
image: "https://placekitten.com/450/600",
name: "First Last",
profile: "https://www.google.com",
termExp: "2023",
title: "Chief Guy",
company: "The Company"
},
{
image: "https://placekitten.com/450/600",
name: "First Last",
profile: "https://www.google.com",
termExp: "2023",
title: "Chief Guy",
company: "The Company"
},
{
image: "https://placekitten.com/450/600",
name: "First Last",
profile: "https://www.google.com",
termExp: "2023",
title: "Chief Guy",
company: "The Company"
}
];
function bodTemplate(bod) {
return `
<div class="col-md-4 col-lg-3">
<div class="card border-0">
<img src="${bod.image}" class="card-img-top" alt="${bod.name}">
<div class="card-body pl-0">
<h5 class="card-title">${bod.name} <span class="text-right">${bod.termExp}</span></h5>
<h6 class="card-title">${bod.title}</h6>
<h6 class="card-title"><span class="text-muted font-weight-bold">${bod.company}</span></h6>
</div>
</div>
</div>
`;
}
document.getElementById("boardDirectors").innerHTML = `
${bodList.map(bodTemplate).join(" ")}
`;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<div class="container-fluid">
<div class="row" id="boardDirectors">
</div>
</div>
This is not relevant to template literals. It's CSS related.
Try adding your id on the div above:
<div id="boardDirectors" class="row no-gutters">
and remove the old one. This should solve your issue.
<div class="container-fluid">
<div id="boardDirectors" class="row no-gutters"></div>
</div>
I have a nested ng-repeat like this. I have a scope variable boards which is array and has further nesting with another array called tasks which is again an array. As you can see in the inner ng-repeat I am trying to bind to task.content.
<div class="col-md-3 boards topmargin leftmargin" ng-repeat="board in boards">
<div class="row">
<div class="col-md-12 centerText bordered"><b>{{board.title}}</b></div>
</div>
<div class="row topmargin tasksContainer">
<div class="col-md-12">
<p ng-init="tasks = board.tasks" ng-repeat="task in tasks" ng-init="taskIndex=$index">
<div>
<span>{{taskIndex}}</span>
<span>{{task.content}}</span>
</div>
</p>
</div>
<hr>
</div>
<div class="row topmargin addTask">
<div class="col-md-12"><textarea class="addTaskField" placeholder="enter task here....."
ng-model="newTask.content"></textarea></div>
<button class="btn btn-primary btn-block" ng-click="addNewTask(board)">Add Task</button>
</div>
</div>
This is the structure of boards array
// vars
$scope.boards = [];
$scope.board={
title: "",
tasks: []
};
$scope.newTask = {
content: "",
tags: [],
completed: null
};
I push the newTask object into board.tasks and board object in boards array which is working fine and on debugger boards array look like this
$scope.boards = [
{
title : "shopping",
tasks : [
{
content: "pen",
complete: false,
tags: []
},
{
content: "bread",
complete: true,
tags: ['groceries']
}
]
},
{
title : "tomorrow",
tasks : [
{
content: "go swimming",
complete: false,
tags: []
},
{
content: "complete to-do app",
complete: false,
tags: ['urgent']
}
]
}
];
The problem I am facing is that the binding {{task.content}} and {{taskIndex}} are not displaying. What am I doing wrong?
A few of things here:
The link that EProgrammerNotFound linked to in the comments (a <p> tag cannot contain a <div> tag)
Second, your ng-repeat is missing boards: ng-repeat="task in board.tasks". So, I think it's supposed to look like this:
<div class="col-md-3 boards topmargin leftmargin" ng-repeat="board in boards">
<div class="row">
<div class="col-md-12 centerText bordered"><b>{{board.title}}</b></div>
</div>
<div class="row topmargin tasksContainer">
<div class="col-md-12">
<div ng-repeat="task in board.tasks" ng-init="taskIndex=$index">
<div>
<span>{{taskIndex}}</span>
<span>{{task.content}}</span>
</div>
</div>
</div>
<hr>
</div>
<div class="row topmargin addTask">
<div class="col-md-12">
<textarea class="addTaskField" placeholder="enter task here....." ng-model="newTask.content"></textarea>
</div>
<button class="btn btn-primary btn-block" ng-click="addNewTask(board)">Add Task</button>
</div>
</div>
Another thing is your <p> tag with the ng-repeat has two ng-inits. Not sure what that results in :)
Example here https://plnkr.co/edit/yJ7u4YTu2TAfhFajAjUY
How can I use ng-repeat to loop over data that contains many nested array data?
I have data that will have many "Segments"
Example:
confirm.booking.flightData[0].Segments[0].FlightNumber
confirm.booking.flightData[0].Segments[1].FlightNumber
confirm.booking.flightData[0].Segments[2].FlightNumber
I have done both ng-repeat with angular, and without angular I would end up resorting to javascript that loops over data and creates the html dynamically, but I wish to do this the ANGULAR way.. HOW?
HTML with Angular/Javascript Arrays:
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<span style="font-weight: bold;">Flight</span>
</div>
<div class="col-md-4">
<span style="font-weight: bold;">Departs</span>
</div>
<div class="col-md-4">
<span style="font-weight: bold;">Arrives</span>
</div>
</div>
<div class="row">
<div class="col-md-4">
{{confirm.booking.flightData[0].Segments[0].FlightNumber}}
</div>
<div class="col-md-4">
({{confirm.booking.flightData[0].Segments[0].DepartureAirport}})
</div>
<div class="col-md-4">
({{confirm.booking.flightData[0].Segments[0].ArrivalAirport}})
</div>
</div>
</div>
Nesting can be done in repeats, but repeating too much in ng-repeats can be costly in terms of performance as angular creates scopes for each element repeated. Hence, filtering data till the perfect abstracted values that you need in terms of html should be done in the js file.
For eg: if u need only segements in the html form do this, or if u need even flight data in html form follow #Rachel's post
<ul data-ng-repeat="item in confirm.booking.flightData[0].Segments">
<li>{{ item.FlightNumber}}</li>
</ul>
Let's say your data is in flightdetails, then you can go about it like this:
<div ng-repeat="a in flightdetails ">
<div ng-repeat="b in a.booking">
<div ng-repeat="c in b.flightdata">
<div ng-repeat="d in c.segments">
{{d.flightnumber}}
</div>
</div>
</div>
</div>
You can use nested ng-repeat to bind your data - see a demo below:
angular.module("app", []).controller("ctrl", function($scope) {
$scope.confirm = {
booking: {
flightData: [{
Segments: [{
FlightNumber: 1
}, {
FlightNumber: 2
}]
}, {
Segments: [{
FlightNumber: 3
}, {
FlightNumber: 4
}]
}]
}
}
// console.log($scope.confirm);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="wrapper" ng-app="app" ng-controller="ctrl">
<div ng-repeat="x in confirm.booking.flightData">
Data {{$index + 1}}:
<div ng-repeat="y in x.Segments">
<div>Flight No: {{y.FlightNumber}}</div>
</div>
<br/>
</div>
</div>
If you want to display only the following:
confirm.booking.flightData[0].Segments[0].FlightNumber
confirm.booking.flightData[0].Segments[1].FlightNumber
confirm.booking.flightData[0].Segments[2].FlightNumber
then you can use limitTo - see demo below:
angular.module("app", []).controller("ctrl", function($scope) {
$scope.confirm = {
booking: {
flightData: [{
Segments: [{
FlightNumber: 1
}, {
FlightNumber: 2
}]
}, {
Segments: [{
FlightNumber: 3
}, {
FlightNumber: 4
}]
}]
}
}
// console.log($scope.confirm);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="wrapper" ng-app="app" ng-controller="ctrl">
<div ng-repeat="x in confirm.booking.flightData | limitTo : 1">
Data {{$index + 1}}:
<div ng-repeat="y in x.Segments">
<div>Flight No: {{y.FlightNumber}}</div>
</div>
<br/>
</div>
</div>
I created an example here:
http://codepen.io/ackzell/pen/ENBymo
It ultimately looks like this, but check the pen as it has some more info:
<ul>
<li ng-repeat="flight in vm.flightData">
<ul>
<li ng-repeat="segment in flight.Segments">
<em>FlightNumber</em> {{ segment.FlightNumber }}
<br />
<em>Departure:</em> {{ segment.DepartureAirport }}
<br />
<em>Arrival:</em> {{ segment.ArrivalAirport }}
</li>
</ul>
</li>
</ul>
Nesting ng-repeats would help, but maybe you want to give your data some treatment first.