We have two tabs 1st one is search filter and the 2nd one results tab. Where all the result is showing. When we click on the search button then the result tab is active and navigate successfully.
But when we click on the search tab and then click on the search button then the result tab is not active.
I am trying through the active and inactive class. but now working.
<ul class="nav nav-tabs">
<li ng-class="{'active': activeFilters}"><a data-toggle="tab" href="{{url}}#filter">Filter</a></li>
<li ng-class="{'active': activeResults}"><a data-toggle="tab" href="{{url}}#results">Results</a></li>
</ul>
In ts file
$scope.activeFilters = false;
$scope.activeResults = true;
Add data-target along with data-toggle. See below snippet that might help you.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dynamic Tabs</h2>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" data-target="#home">Home</a></li>
<li><a data-toggle="tab" data-target="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" data-target="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" data-target="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</body>
</html>
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Myshop</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Abel&display=swap" rel="stylesheet">
</head>
<body>
<style>
.head{
font-family: 'Abel', sans-serif;
}
</style>
{% load static %}
{%for product_list in product_list%} after adding this code the webpage is getting duplicated
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<h1 class="head text-center m-4">Premium Watchs</h1>
<div class="container">
<div class="row g-3">
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<img src='{% static "shop\rolex.jpg" %}' class="card-img-top" alt="A Street in Europe">
<div class="card-body">
<h5 class="card-title">{{product_list.0.Product_name}}</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum odio in felis mattis feugiat. In rhoncus libero magna, ultricies condimentum tortor tempor sit amet.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<img src='{% static "shop\rolex.jpg" %}' class="card-img-top" alt="London">
<div class="card-body">
<h5 class="card-title">London</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum odio in felis mattis feugiat. In rhoncus libero magna, ultricies condimentum tortor tempor sit amet.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<img src='{% static "shop\rolex.jpg" %}' class="card-img-top" alt="New York">
<div class="card-body">
<h5 class="card-title">New York</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum odio in felis mattis feugiat. In rhoncus libero magna, ultricies condimentum tortor tempor sit amet.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
{%endfor%}
table
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
i am freshener learning django and i am not able to fetch the data from the database so please help me to solve this problem
i want to fetch data from my database to my website
after adding this line of code the webpage is getting duplicated
{%for product_list in product_list%}
models.py
this the code where i created the database it has very random fields as i am making this website to learn django
from django.db import models
class Product(models.Model):
product_id=models.AutoField
product_name=models.CharField(max_length=50)
category=models.CharField(max_length=50, default='')
sub_category=models.CharField(max_length=50, default='')
desc = models.CharField(max_length=500)
price = models.IntegerField(default=0)
pub_date=models.DateField()
images = models.ImageField(upload_to="shop/images",default='')
def __str__(self):
return self.product_name
I am developing a web page where the user needs to upload a file. I am using a general technique that sits on top of the \input type="file"\ element that enables me to style it better.
This works fine until I put it in a Bootstrap 4 tab where it appears that the element stops receiving it's Click event.
To demonstrate this I have an HTML page using Jquery and Bootstrap. I have the similar elements sitting inside and outside of the tab. When I click the 'Browse' button on the elements outside the tab it works as expect. However when I click on the 'Browse button inside the tab nothing happens. You need to select "tab 2" then "tab 1" to get the the first tab's content to appear.
There must something in the Bootstrap tab that is blocking this.
Can anybody point me in the right direction as I need to use tabs ?
<!DOCTYPE html>
<title>File Upload</title>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
body {
padding-top: 1em;
}
</style>
<div class="container">
<div class="row">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" id="tab1" data-toggle="tab" role="tab" aria-controls="tab1" aria-selected="true" href="#tab1Content">Tab 1</a>
</li>
<li>
<a class="nav-link" id="tab2" data-toggle="tab" role="tab" aria-controls="tab2" aria-selected="false" href="#tab2Content">Tab 2</a>
</li>
</ul>
<div class="tab-content" id="tabContent">
<div class="tab-pane fade show " id="tab1Content" data-toggle="tab" role="tabpanel" aria-labelledby="tab1">
<div class="row pb-5">
<div class="col-md-12">
<div class="input-group">
<p>Inside of tab</p>
<input type="file" id="fileUploader" name="fileUploader" style="visibility:hidden;" />
<input class="form-control input-xlarge" type="text" id="fileName" value="Choose file">
<div class="input-group-append">
<button id="browseButton" name="browseButton" class="btn btn-success input-group-text">Browse</button>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab2Content" role="tabpanel" aria-labelledby="tab2">
</div>
</div>
</div>
</div>
<div class="container">
<div class="row pb-5">
<div class="col-md-12">
<div class="input-group">
<p>Outside of tab</p>
<input type="file" id="fileUploader2" name="fileUploader2" style="visibility:hidden;" />
<input class="form-control input-xlarge" type="text" id="fileName2" value="Choose file">
<div class="input-group-append">
<button id="browseButton2" name="browseButton2" class="btn btn-success input-group-text">Browse</button>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$('#browseButton').on('click', function () {
$('#fileUploader').click();
});
$('#fileUploader').change(function () {
$('#fileName').val($(this).val());
});
$('#browseButton2').on('click', function () {
$('#fileUploader2').click();
});
$('#fileUploader2').change(function () {
$('#fileName2').val($(this).val());
});
});
</script>
Please check below code snippet. Might be your HTML tags were not closed properly.
<!DOCTYPE html>
<title>File Upload</title>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
body {
padding-top: 1em;
}
</style>
<div class="container">
<div class="row">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.
<p>Inside of tab</p>
<input type="file" id="fileUploader" name="fileUploader" style="visibility:hidden;" />
<input class="form-control input-xlarge" type="text" id="fileName" name="fileName" value="Choose file">
<div class="input-group-append">
<button id="browseButton" name="browseButton" class="btn btn-success input-group-text">Browse</button>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna consequat voluptate minim amet aliquip ipsum aute laboris nisi. Labore labore veniam irure irure ipsum pariatur mollit magna in cupidatat dolore magna irure esse tempor ad mollit. Dolore commodo nulla minim amet ipsum officia consectetur amet ullamco voluptate nisi commodo ea sit eu.
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
Sint sit mollit irure quis est nostrud cillum consequat Lorem esse do quis dolor esse fugiat sunt do. Eu ex commodo veniam Lorem aliquip laborum occaecat qui Lorem esse mollit dolore anim cupidatat. Deserunt officia id Lorem nostrud aute id commodo elit eiusmod enim irure amet eiusmod qui reprehenderit nostrud tempor. Fugiat ipsum excepteur in aliqua non et quis aliquip ad irure in labore cillum elit enim. Consequat aliquip incididunt ipsum et minim laborum laborum laborum et cillum labore. Deserunt adipisicing cillum id nulla minim nostrud labore eiusmod et amet. Laboris consequat consequat commodo non ut non aliquip reprehenderit nulla anim occaecat. Sunt sit ullamco reprehenderit irure ea ullamco Lorem aute nostrud magna.
</div>
</div>
</div>
</div>
<div> </div>
<div> </div>
<div> </div>
<div class="container">
<div class="row pb-5">
<div class="col-md-12">
<div class="input-group">
<p>Outside of tab</p>
<input type="file" id="fileUploader2" name="fileUploader2" style="visibility:hidden;" />
<input class="form-control input-xlarge" type="text" id="fileName2" value="Choose file">
<div class="input-group-append">
<button id="browseButton2" name="browseButton2" class="btn btn-success input-group-text">Browse</button>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$('#browseButton').on('click', function () {
$('#fileUploader').click();
});
$('#fileUploader').change(function () {
$('#fileName').val($(this).val());
});
$('#browseButton2').on('click', function () {
$('#fileUploader2').click();
});
$('#fileUploader2').change(function () {
$('#fileName2').val($(this).val());
});
});
</script>
I have a jsfiddle example illustrating an accordion that works when using no angular; in the no angular example you can see that the previous panel closes when I click on a new panel, you can also see that there is spacing between each panel. When I add angular and have the panels build from an object array the accordion no longer works correctly; instead the previous panel does not collapse when clicking a new panel and the spacing between each panel no longer exists. I have compared the code and I can't figure out what I am doing wrong, can you see what is wrong?
HTML:
<div class="container" ng-controller="cntrl">
<p>No angular:</p>
<div class="panel-group" id="accordion">
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
<div class="panel-heading">
<h4 class="panel-title">
Collapsible Group 1
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
<div class="panel-heading">
<h4 class="panel-title">
Collapsible Group 2
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordion" data-target="#collapse3">
<div class="panel-heading">
<h4 class="panel-title">
Collapsible Group 3
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
</div>
<!-- now using angular -->
<p>Using angular (<em>notice the previous panel no longer collapses and the spacing between the panels does not exist like in my no angular example</em>):</p>
<div class="panel-group" id="ngaccordion">
<div ng-repeat="prop in someObj">
<div class="panel panel-default" data-toggle="collapse" data-parent="#ngaccordion" data-target="#{{prop.id}}">
<div class="panel-heading">
<h4 class="panel-title">
{{prop.contractName}}
</h4>
</div>
<!-- Instead of {{prop.id}} for id below and data-target above I have also tried "test{{$index}}" -->
<div id="{{prop.id}}" class="panel-collapse collapse" ng-class="{ 'in' : $first}">
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">
<label>Price:</label> {{prop.price | currency:"$" }}</li>
<li class="list-group-item">
<label>Start Date:</label> {{prop.startDate}}</li>
<li class="list-group-item">
<label>End Date:</label> {{prop.endDate}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
JS:
var app = angular.module('app', []);
app.controller('cntrl', ['$scope', function($scope) {
$scope.someObj = [{
id: 'test1',
contractName: 'Test One',
price: 0.00,
startDate: moment().format("YYYY-MM-DD"),
endDate: moment().add(6, 'months').format("YYYY-MM-DD")
}, {
id: 'test2',
contractName: 'Test Two',
price: 20.00,
startDate: moment().add(6, 'months').format("YYYY-MM-DD"),
endDate: moment().add(12, 'months').format("YYYY-MM-DD")
}, {
id: 'test3',
contractName: 'Test Three',
price: 40.00,
startDate: moment().add(12, 'months').format("YYYY-MM-DD"),
endDate: 'NO END'
}];
}]);
Any help would be appreciated!
Since you are adding the ng-repeat in another div which is a parent of the accordion element (Bootstrap is confounded as to where the other ones are! :) ), this problem is occurring, to solve this issue just set the ng-repeat inside the panel div itself, refer my below example.
Before:
<div class="panel-group" id="ngaccordion">
<div ng-repeat="prop in someObj">
<div class="panel panel-default" data-toggle="collapse" data-parent="#ngaccordion" data-target="#{{prop.id}}">
<div class="panel-heading">
<h4 class="panel-title">
After:
<div class="panel-group" id="ngaccordion">
<div ng-repeat="prop in someObj" class="panel panel-default" data-toggle="collapse" data-parent="#ngaccordion" data-target="#{{prop.id}}">
<div class="panel-heading">
<h4 class="panel-title">
var app = angular.module('app', []);
app.controller('cntrl', ['$scope', function($scope) {
$scope.someObj = [{
id: 'test1',
contractName: 'Test One',
price: 0.00,
startDate: moment().format("YYYY-MM-DD"),
endDate: moment().add(6, 'months').format("YYYY-MM-DD")
}, {
id: 'test2',
contractName: 'Test Two',
price: 20.00,
startDate: moment().add(6, 'months').format("YYYY-MM-DD"),
endDate: moment().add(12, 'months').format("YYYY-MM-DD")
}, {
id: 'test3',
contractName: 'Test Three',
price: 40.00,
startDate: moment().add(12, 'months').format("YYYY-MM-DD"),
endDate: 'NO END'
}];
}]);
.container {
margin-top: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<div class="container" ng-controller="cntrl">
<p>
No angular:
</p>
<div class="panel-group" id="accordion">
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
<div class="panel-heading">
<h4 class="panel-title">
Collapsible Group 1
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
<div class="panel-heading">
<h4 class="panel-title">
Collapsible Group 2
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordion" data-target="#collapse3">
<div class="panel-heading">
<h4 class="panel-title">
Collapsible Group 3
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
</div>
<!-- now using angular -->
<p>
Using angular (<em>notice the previous panel no longer collapses and the spacing between the panels does not exist like in my no angular example</em>):
</p>
<div class="panel-group" id="ngaccordion">
<div ng-repeat="prop in someObj" class="panel panel-default" data-toggle="collapse" data-parent="#ngaccordion" data-target="#{{prop.id}}">
<div class="panel-heading">
<h4 class="panel-title">
{{prop.contractName}}
</h4>
</div>
<!-- Instead of {{prop.id}} for id below and data-target above I have also tried "test{{$index}}" -->
<div id="{{prop.id}}" class="panel-collapse collapse" ng-class="{ 'in' : $first}">
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">
<label>Price:</label> {{prop.price | currency:"$" }}</li>
<li class="list-group-item">
<label>Start Date:</label> {{prop.startDate}}</li>
<li class="list-group-item">
<label>End Date:</label> {{prop.endDate}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Today I have created a ThemeForest like a website with angular and mvc , So I have a login page, it will load the Dashboard page, In the dashboard page have lots of icons, So i click the Icons , it will load the complete different layout page for every template.
here is my Question.
**
I need to load an every new layout from current nested views. Don't
want to load under the nested views?
2) And the view is not a partial view type and its a new HTML page with new css and Js files reference from current file.
3) I don't want to load the current Js files in new Html file.
**
Whether Angular js ui-Routing techniques works by using ui-view mentioned in the page.So in the page i have click the icon, need to load different master page,So right now what happen is the master page is loaded under the dashboard page. It will be support by angular routing or not.
So i have created a sample demo:
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
// nested list with custom controller
.state('home.list', {
url: '/list',
templateUrl: 'Ecommmerce-Website.html',
})
// nested list with just some random string data
.state('home.paragraph', {
url: '/paragraph',
template: 'I could sure use a drink right now.'
})
// ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
.state('about', {
url: '/about',
views: {
'': { templateUrl: 'partial-about.html' },
'columnOne#about': { template: 'Look I am a column!' },
'columnTwo#about': {
templateUrl: 'table-data.html',
controller: 'scotchController'
}
}
});
});
It is the startup page:
Here I am loading the Dashboard page:
<!DOCTYPE html>
<html>
<head>
<!-- CSS (load bootstrap) -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
.navbar { border-radius:0; }
</style>
<!-- JS (load angular, ui-router, and our custom js file) -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="app.js"></script>
</head>
<!-- apply our angular app to our site -->
<body ng-app="routerApp">
<!-- MAIN CONTENT -->
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div class="container">
<div ui-view></div>
</div>
</body>
This is the root router template view loaded in above html.
<div class="jumbotron text-center">
<a ui-sref=".list" class="btn btn-primary">Ecommerce Websites</a>
<a ui-sref=".paragraph" class="btn btn-danger">Hotels Websites</a>
</div>
<div ui-view></div>
another master page :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {height: 1500px}
/* Set gray background color and 100% height */
.sidenav {
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height: auto;}
}
</style>
<!-- CSS (load bootstrap) -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- JS (load angular, ui-router, and our custom js file) -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="routerApp">
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>John's Blog</h4>
<ul class="nav nav-pills nav-stacked">
<li class="active">Home</li>
<li>Friends</li>
<li>Family</li>
<li>Photos</li>
</ul><br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search Blog..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
<div class="col-sm-9">
<h4><small>RECENT POSTS</small></h4>
<hr>
<h2>I Love Food</h2>
<h5><span class="glyphicon glyphicon-time"></span> Post by Jane Dane, Sep 27, 2015.</h5>
<h5><span class="label label-danger">Food</span> <span class="label label-primary">Ipsum</span></h5><br>
<p>Food is my passion. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<br><br>
<h4><small>RECENT POSTS</small></h4>
<hr>
<h2>Officially Blogging</h2>
<h5><span class="glyphicon glyphicon-time"></span> Post by John Doe, Sep 24, 2015.</h5>
<h5><span class="label label-success">Lorem</span></h5><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<hr>
<h4>Leave a Comment:</h4>
<form role="form">
<div class="form-group">
<textarea class="form-control" rows="3" required></textarea>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
<br><br>
<p><span class="badge">2</span> Comments:</p><br>
<div class="row">
<div class="col-sm-2 text-center">
<img src="bandmember.jpg" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<div class="col-sm-10">
<h4>Anja <small>Sep 29, 2015, 9:12 PM</small></h4>
<p>Keep up the GREAT work! I am cheering for you!! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<br>
</div>
<div class="col-sm-2 text-center">
<img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<div class="col-sm-10">
<h4>John Row <small>Sep 25, 2015, 8:25 PM</small></h4>
<p>I am so happy for you man! Finally. I am looking forward to read about your trendy life. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<br>
<p><span class="badge">1</span> Comment:</p><br>
<div class="row">
<div class="col-sm-2 text-center">
<img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<div class="col-xs-10">
<h4>Nested Bro <small>Sep 25, 2015, 8:28 PM</small></h4>
<p>Me too! WOW!</p>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid">
<p>Footer Text</p>
</footer>
</body>
</html>
here is the plunker Demo:
http://embed.plnkr.co/IzimSVsstarlFviAm7S7/preview:
You have to make some changes in your code to achieve your requirement.
I used ui-router multiple views to achieve this here is a documentation for it
1) In app.js, Change your states to,
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
views: {
'': { templateUrl: 'partial-home.html' },
'header': { templateUrl: 'tplheader.html', },
'footer': {
templateUrl: 'tplfooter.html',
}
}
})
// nested list with custom controller
.state('list', {
url: '/list',
templateUrl: 'partial-home-list.html',
controller: function($scope) {
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
}
})
// nested list with just some random string data
.state('paragraph', {
url: '/paragraph',
template: 'I could sure use a drink right now.'
})
// ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
.state('about', {
url: '/about',
views: {
'': { templateUrl: 'partial-about.html' },
'columnOne#about': { template: 'Look I am a column!' },
'columnTwo#about': {
templateUrl: 'table-data.html',
controller: 'scotchController'
}
}
});
});
Check, change home.list to .state('list') and home.paragraph .state('paragraph' )
2) Second, partial-home.html
change ui-sref=".list" to ui-sref="list" and ui-sref=".paragraph" to ui-sref="paragraph"
<div class="jumbotron text-center">
<h1>The Homey Page</h1>
<p>This page demonstrates <span class="text-danger">nested</span> views.</p>
<a ui-sref="list" class="btn btn-primary">List</a>
<a ui-sref="paragraph" class="btn btn-danger">Paragraph</a>
</div>
<div ui-view></div>
3) In index.html
<body ng-app="routerApp">
<!-- NAVIGATION -->
<script type="text/ng-template" id="tplheader.html">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">AngularUI Router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</nav>
</script>
<!-- MAIN CONTENT -->
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div class="container">
<div ui-view="header"></div>
<div ui-view></div>
<div ui-view="footer"></div>
</div>
<script type="text/ng-template" id="tplfooter.html">
<div class="text-center">
<p>A tutorial by scotch.io</p>
<p>View the tutorial: AngularJS Routing using UI-Router</p>
</div>
</script>
</body>
HERE IS THE CHANGED PLUNKER DEMO
I have a "edit" view where I need to display tabs to separate the different information needed. I found a site where it discusses the creation of a directive to catch the tab changing. This is my first directive and it is not working. When I click on the second tab, it takes me back to my default view. Not sure what I have implemented incorrectly.
Web Page -
<ul class="nav nav-tabs">
<li class="active"><a showTab="" href="#home">Home</a></li>
<li><a showTab="" href="#menu1">Menu 1</a></li>
<li><a showTab="" href="#menu2">Menu 2</a></li>
<li><a showTab="" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
The associated directive -
'use strict';
define(['app'], function (app) {
var injectParams = ['showtab'];
var wcTabDirective = function (showtab) {
return {
link: function (scope, element, attrs) {
element.click(function (e) {
e.preventDefault();
$(element).tabs('show');
});
}
}
};
wcTabDirective.$inject = injectParams;
app.directive('wcTab', wcTabDirective);
});
I have put a break point in the directive but it is never reached.
You haven't actually applied your "wc-tab" directive to any elements.
Try adding the directive to your tab anchor elements:
<a wc-tab showTab="" href="#menu1">Menu 1</a>
Check that the showTab attribute is correct as well. If it is a directive then it should be applied as show-tab="".