I have used bootstrap plugin to collapse and expand the <div>s. I am able to do it for individual <div>'s but if i leave one <div> expanded and do a collapseAll(), the expanded <div> only getting collapsed. Please provide me a solution on this
html:
<body ng-controller="MainCtrl">
<div class="panel panel-default" ng-repeat="item in items">
<div class="panel-heading" ng-click="isCollapsed = !isCollapsed">{{item.title}}</div>
<div class="panel-body" collapse="isCollapsed">{{item.content}}</div>
</div>
<div>
<input type="checkbox" id="collapse_all_cards" ng-model="isCollapsed"><label for="collapse_all_cards">Collapse All</label>
</div>
</body>
js:
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
$scope.items = [{'title':'Item1','content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus orci sodales, pellentesque urna eu'},
{'title':'Item2','content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus orci sodales, pellentesque urna eu'},
{'title':'Item3','content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus orci sodales, pellentesque urna eu'}
]
});
link: http://plnkr.co/edit/mcnqeLJcTyaAuTI9JHb9
Please see this Plunk
Pretty sure this is the behavour you are after :)
The problem before was that the same "isCollapsed" property on scope was being used for the "collapse all" and the individual collapses so they were tripping each other up.
See the new controller code which has an individual boolean "isCollapsed" property for each item in the collection:
{'title':'Item1','content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus orci sodales, pellentesque urna eu', isCollapsed: true}
If you need any refinements to the code just ask :)
Related
First, I apologize for not explaining well.
When I create multiple Accordion using mui(each AccordionDetails height are 80vh). How can I see the entire content of that selected Accordion?
Thank you.
I attached a screenshot for better understanding and code.
SOLUTION
I solved this one using useref and scrollIntoView.
import React, {useState} from 'react';
import Accordion from '#mui/material/Accordion';
import AccordionSummary from '#mui/material/AccordionSummary';
import AccordionDetails from '#mui/material/AccordionDetails';
import Typography from '#mui/material/Typography';
import ExpandMoreIcon from '#mui/icons-material/ExpandMore';
export default function Example() {
const [data, setData] = useState([
{name:"hello",desc:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."},
{name:"hello",desc:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."},
{name:"hello",desc:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."},
{name:"hello",desc:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."},
])
return (
<div>
{data.map((data) => {
return(
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography>{data.name}</Typography>
</AccordionSummary>
<AccordionDetails style={{height:"100vh"}}>
<Typography>
{data.desc}
</Typography>
</AccordionDetails>
</Accordion>
)
})}
</div>
);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
help me please, I display the html markup of 6 posts, the first click works correctly, the second click I display the same posts. how should I add six new posts, and so every time I click?
I don't know what can be used instead of the slice method. demo https://jsfiddle.net/u9zc7p5v/13/
const content = mrd.map(function(data, elem) {
return `
<div class="blog__item">
<h2 class="blog__item-title">
${data.title}
</h2>
<input type="checkbox" class="read-more-state" id="post-${elem}" />
<p class="blog__item-text">
${data.body} <span class="blog__item-more">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem itaque ducimus unde harum vitae quam provident. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta sapiente odit laborum tempore sed quaerat a aliquam? Corrupti dolorum, tempora iste qui modi consectetur explicabo quia vel reiciendis nesciunt? Id!</span>
</p>
<label for="post-${elem}" class="blog__item-toggle" >Read More</label>
<div>${elem}</div>
</div>
`
}).slice(startNum, endNum).join('');
Increase the startNum value startNum+=6. then in slice function do startNum + endNum.
$(function(){
const blogs = document.querySelector('.blog__items')
const moreBtn = document.querySelector('.blog-btn')
let startNum = 0;
let endNum = 6;
async function getContent() {
let responce = await fetch('https://jsonplaceholder.typicode.com/posts');
let data = await responce.json();
return data;
}
$(moreBtn).on('click', async function(e) {
let mrd = await getContent();
console.log(mrd.length)
const content = mrd.map(function(data, elem) {
return `
<div class="blog__item">
<h2 class="blog__item-title">
${data.title}
</h2>
<p class="blog__item-text">
${data.body} <span class="blog__item-more">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem itaque ducimus unde harum vitae quam provident. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta sapiente odit laborum tempore sed quaerat a aliquam? Corrupti dolorum, tempora iste qui modi consectetur explicabo quia vel reiciendis nesciunt? Id!</span>
</p>
<label class="blog__item-toggle" >Read More</label>
<div>${elem}</div>
</div>
`
}).slice(startNum, startNum+endNum).join('');
console.log(startNum)
const el = $(content);
$(blogs).append(el)
el.on('click', function() {
});
startNum+= 6
});
});
Angularjs ng-repeat with div tag..i have a code with div tag as shown..i want to repeat the whole div with img src being different on the second loop..how to do this with ng-repeat directive in angularjs?
<div class="col-xs-12 col-sm-12 col-md-6" >
<a href="Events.html">
<div class="PastEvents">
<div class="EventDate"><h5>25<br /><span>Feb</span></h5></div>
<img src = "resources/front/images/UpComing-Event00.jpg">
<h6>Lorem ipsum</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non massa ut tortor volutpat eleifend eu lobortis urna.</p>
</div>
</a>
</div>
JS:
myModule.controller('ctrl', function($scope) {
$scope.imageSources = ["src1", "src2", "src3"]
})
HTML:
<div ng-repeat="src in imageSources" class="col-xs-12 col-sm-12 col-md-6" >
<a href="Events.html">
<div class="PastEvents">
<div class="EventDate"><h5>25<br /><span>Feb</span></h5></div>
<img ng-src="{{src}}">
<h6>Lorem ipsum</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non massa ut tortor volutpat eleifend eu lobortis urna.</p>
</div>
</a>
</div>
Basically, have your image sources in your controller and use the ng-src directive in your template
I'm trying understand your question.
If you wanna display different style by the index of 'ng-repeat', you can do like following.
<div class="PastEvents" ng-repeat="item in items">
<div class="EventDate"><h5>25<br /><span>Feb</span></h5></div>
<img src = "resources/front/images/UpComing-Event00.jpg" ng-if="$index == 1"><!-- first item-->
<img src = "resources/front/images/UpComing-Event00.jpg" ng-if="$index != 1"><!-- second and rest items-->
<h6>Lorem ipsum</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non massa ut tortor volutpat eleifend eu lobortis urna.</p>
</div>
If you just wanna display different resource, just using:
<img src = "resources/front/images/UpComing-Event{{$index}}.jpg">
in my code .col-md-3 is not getting loaded for all rows.
<div class="row">
<div class="col-md-3 col-md-offset-2 footer-image col-sm-3 col-sm-offset-2 col-xs-2 col-xs-offset-3">
<img alt="Get Started" src="/assets/f_1.png" alt="Life Style" title="life style"
class="img-thumbnail resize-image"/>
</div>
<div class="col-md-3 footer-image col-sm-3 col-xs-2">
<img alt="Get Started" src="/assets/f_1.png" alt="About Us" title="About Us"
class="img-thumbnail resize-image" />
</div>
<div class="col-md-3 footer-image col-sm-3 col-xs-2">
<img alt="Get Started" src="/assets/f_1.png" alt="Contact Us" title="Contact Us"
class="img-thumbnail resize-image" />
</div>
</div>
<div class="row">
<div class='col-md-3'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, in, soluta deserunt
</div>
<div class='col-md-3'>
Delectus, earum, nobis, esse expedita corporis eaque cupiditate nihil quia consequuntur ea
</div>
<div class='col-md-3'>
Delectus, quam, minus quisquam fugit harum a ab quo fugiat obcaecati molestias voluptatem velit
</div>
</div>
In the first row section, where I am adding images, there the col-md-3 is getting loaded, but the same is not getting loaded in next row(with text contents) !
is this what you're trying to achieve? Try reconstructing your .cols again without the offsets.
<div class="row">
<div class="col-md-3"><img src="http://placehold.it/350x150"></div>
<div class="col-md-3"><img src="http://placehold.it/350x150"></div>
<div class="col-md-3"><img src="http://placehold.it/350x150"></div>
<div class="col-md-3"><img src="http://placehold.it/350x150"></div>
</div>
<div class="row">
<div class="col-md-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, tempore, blanditiis ab consequuntur ea molestiae?</div>
<div class="col-md-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, quis libero cupiditate repellat iusto voluptatum.</div>
<div class="col-md-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, assumenda, aspernatur nihil ut quia eveniet!</div>
<div class="col-md-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, assumenda, aspernatur nihil ut quia eveniet!</div>
</div>
I have done this before but I can't for the life of me remember how. I want a user to be able to select a product by clicking a button in an <li> then have that passed to an array. As well as that, the <li> needs to have a class 'active' once that item is in the selected array:
<li class="row" data-ng-repeat="product in products">
<div class="col-lg-9">
<h3>{{product.name}}</h3>
<p>{{product.description}}</p>
</div>
<div class="col-lg-3">
<button class="btn btn-primary" data-ng-click="selectProduct(product.id)">Select Product</button>
</div>
</li>
is the HTML and this is the controller:
app.controller("MainController", function($scope, $http) {
$scope.selected_products = []
$scope.products = [
{
name: 'Example product',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, assumenda, dolor, ipsa, atque obcaecati tempora perspiciatis earum vitae amet cum nostrum blanditiis ducimus culpa molestiae temporibus porro debitis voluptatibus libero.',
category: 'VT'
},
{
name: 'Example product 2',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, assumenda, dolor, ipsa, atque obcaecati tempora perspiciatis earum vitae amet cum nostrum blanditiis ducimus culpa molestiae temporibus porro debitis voluptatibus libero.',
category: 'VT'
}
]
$scope.selectProduct = function(name) {
console.log(name)
}
})
Does anyone have any pointers as to how to do this?
Here you are:
$scope.isSelected = function(product){
return this.selected_products.indexOf(product)>-1;
}
$scope.selectProduct = function(product) {
if(!this.isSelected(product)){
this.selected_products.push(product);
}
}
Use it like:
<button ng-disabled="isSelected(product)" data-ng-click="selectProduct(product)">Select Product</button>
Working example: http://plnkr.co/edit/sPAN36?p=preview