I have an angularjs webpage with bootstrap. I'm trying to use bootstrap cards. I selected bootstrap card-columns class but i got a problem. In adding fourth one, sequance will change to card-colums: 2 but its default card-colums: 3.
At JSFiddle https://jsfiddle.net/fdbwyoc7
angular.module("app", []).controller("bdCtrl", function($scope) {
$scope.cards = [{}];
$scope.appendCard = function() {
$scope.cards.push({});
};
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>
<body ng-app="app" ng-controller="bdCtrl">
<button class="btn btn-warning" ng-click="appendCard()">Add new</button>
<br>
<div class="container-fluid">
<div class="card-columns" style="column-count: 3;">
<div class="card" ng-repeat="rd in cards">
<img class="card-img-top" src="https://www.direnc.net//3d-printer-prusa-i-3-demonte-3d-printer-eitleri-china-19324-99-O.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</body>
Related
I want to display {{x.description}} inside the p tags only when the Descriptions anchor tag is clicked and hide when the other links are clicked and I want to display the ul when Others anchor tag is clicked.
I tried using ng-show and ng-hide but it doesn't work correctly.
Here is the markup
<div class="modal" id="room_detail" ng-repeat="x in roomdata.data">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>{{x.room_type}} - {{current_Hotel.hotel_name}}</h3>
Descriptions
Room Pictures
Amenities
Others
</div>
<div class="modal-body">
<p>{{x.description}}</p>
<ul>
<li>Bed Type: {{x.bed_type}}</li>
<li>Room Size: {{x.room_size_value}} Square Meters</li>
<li>Room View Type: {{x.room_view_type}}</li>
</ul>
</div>
</div>
</div>
</div>
This should work
<div class="modal" id="room_detail" ng-repeat="x in roomdata.data">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>{{x.room_type}} - {{current_Hotel.hotel_name}}</h3>
Descriptions
Room Pictures
Amenities
Others
</div>
<div class="modal-body">
<p ng-show="show=='desc'">{{x.description}}</p>
<ul ng-show="show=='others'">
<li>Bed Type: {{x.bed_type}}</li>
<li>Room Size: {{x.room_size_value}} Square Meters</li>
<li>Room View Type: {{x.room_view_type}}</li>
</ul>
</div>
</div>
</div>
</div>
angular.module('myApp', []);
angular
.module('myApp')
.controller('MyController', MyController);
MyController.$inject = [];
function MyController() {
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">
<div class="modal-header">
<h3>heading3</h3>
Descriptions
Room Pictures
Amenities
Others
</div>
<div class="modal-body">
<p ng-show="show=='desc'">Description</p>
<ul ng-show="show=='others'">
<li>Bed Type: </li>
<li>Room Size: Square Meters</li>
<li>Room View Type: </li>
</ul>
</div>
</div>
I'm simply trying to display comments that users put within a comment box. However, I'm having issues because it's within an ng-repeat directive. Let me show so you can better understand visually:
<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title>Nuvi Interview Code Project</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body ng-controller="HomeController">
<div class="container-fluid">
<h1>Nuvi Interview Code Project</h1>
<form class="form-inline well well-sm clearfix">
<span class="glyphicon glyphicon-search"></span>
<input type="text" placeholder="Search" class="form-control" ng-model="search">
</form>
<div class="row">
<div class="col-sm-6" ng-repeat="actor in data | filter:search">
<div class="well well-sm">
<div class="row">
<div class="col-md-6">
<img ng-src="{{actor.actor_avator}}" class="img-rounded img-responsive well-image pull-left">
<h3 class="name" data-toggle="modal" data-target="#actor-info" ng-click="changeActiveActor(actor)">{{actor.actor_name}}</h3>
<hr>
<p ng-repeat="say in activity_comments">{{say}}</p>
<div>{{actor.activity_comments}} Comments {{actor.activity_likes}} likes {{actor.activity_shares}} shares</div>
<br>
<input type="text" class="form-control" placeholder="Write a comment..." ng-model="comment">
<button class="btn btn-default" ng-click="postComment($index, comment)">Post Comment</button>
</div>
<div class="col-md-6">
<p class="pull-right"><strong>{{actor.provider}} </strong></p>
<p><strong>Post</strong></p>
<h5>{{actor.activity_message}}</h5>
<br><br><br><br><br>
<button ng-click="countUp($index)" type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-thumbs-up"></span> Like
</button>
<button ng-click="countDown($index)" type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-thumbs-down"></span> Unlike
</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal" id="actor-info">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2>{{activeActor.actor_name}}</h2>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<img ng-src="{{activeActor.actor_avator}}" class="img-rounded img-responsive">
</div>
</div>
<div class="row top-buffer">
<div class="col-md-6">
<p>Message: {{activeActor.activity_message}}</p>
<p><strong>Username:</strong> {{activeActor.actor_username}}</p>
<p><strong>Date:</strong> {{activeActor.activity_date}}</p>
<p><strong>Comment:</strong> {{activeActor.activity_comments}}</p>
<p><strong>Likes:</strong> {{activeActor.activity_likes}}</p>
<p><strong>Sentiment:</strong> {{activeActor.activity_sentiment}}</p>
<p><strong>Shares:</strong> {{activeActor.activity_shares}}</p>
<p><strong>ID:</strong> {{activeActor.id}}</p>
<p><strong>Provider:</strong> {{activeActor.provider}}</p>
</div>
<div class="col-xs-12">
<p></p>
<button class="btn btn-danger pull-right" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END OF MODAL -->
<hr>
<h6 class="pull-right">Coded by Saia Fonua</h6>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
Here is my app.js:
var app = angular.module("MyApp", []);
app.controller("HomeController", ["$scope", "$http", function($scope, $http) {
$scope.data = [];
$scope.search = "";
$scope.comment = "";
$scope.activeActor = {};
$scope.changeActiveActor = function(index) {
$scope.activeActor = index;
}
$scope.postComment = function(index, comment) {
console.log('comment ', comment);
//$scope.data[index].comments = [];
$scope.data[index].comments.push(comment);
console.log($scope.data[index]);
}
$scope.countUp = function(index) {
$scope.data[index].activity_likes++;
}
$scope.countDown = function(index) {
$scope.data[index].activity_likes--;
}
$http.get("https://nuvi-challenge.herokuapp.com/activities").then(function(response) {
console.log(response.data);
$scope.data = response.data;
})
}])
Can someone please help me to get the comments to display. When you start playing around with it, you'll see why it's harder than the problem sounds!
You have some problems with this line
<p ng-repeat="say in activity_comments">{{say}}</p>
As you are adding the comments to
$scope.data[index].comments.push(comment);
They would be reached by the actor.comments object
<p ng-repeat="say in actor.comments">{{say}}</p>
Our designer has given me jquery flexslider for showing recently viewed items in our project. I need to construct a slider of recently viewed products in angular js, dynamically based on provided flex slider.In my system, recently viewed items are stored as json object( not array).
First of all flexslider is not working, it means sliding feature is not working inside my angular project. I tried to use angular flex slider module from online and tried to iterate my nested object and construct a slider using my data. It is also not working(picture is not showing). My designer asked me to write down a directive, so overall design will not have any problem or any design modification.
Can any of you can help me regarding this
Jquery flex slider dynamic part inside partial as follows
<<div class="recent_summary clearfix">
<h2>RECENTLY VIEWED</h2>
<div class="nav_carousel">
<div class="carousel mini_thumb_slider">
<ul class="stage_nav">
<li ng-repeat="arrObj in recentItems">
<div ng-repeat="arrItem in arrObj.timestamp track by $index">
<div ng-repeat="(wsitekey,item) in arrItem.sites track by $index">
<div ng-repeat="(prokey,proMd5) in item.add_to_cart track by $index">
<div class="product-image mini">
<div class="p_image_innner">
<img ng-src="{{proMd5.image}}" title="{{proMd5.title}} by {{item.info.name}}">
<div class="rateit">
<div class="rateis">
</div>
</div>
<a class="quick-product" data-toggle="modal" data-target="#quick-popup" ng-click="set_current_product_pro(proMd5,item,prokey,wsitekey)">+</a>
</div>
</div>
<div class="caption"><a ng-click="menuShopApi('',item.info.name)">{{item.info.name}}</a></div>
</div>
<div ng-repeat="(prokey,proMd5) in item.failed_to_add_to_cart track by $index">
<div class="product-image mini">
<div class="p_image_innner">
<img ng-src="{{proMd5.image}}" title="{{proMd5.title}} by {{item.info.name}}">
<div class="rateit">
<div class="rateis">
</div>
</div>
<a class="quick-product" data-toggle="modal" data-target="#quick-popup" ng-click="set_current_product_pro(proMd5,item,prokey,wsitekey)">+</a>
</div>
</div>
<div class="caption"><a ng-click="menuShopApi('',item.info.name)">{{item.info.name}}</a></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
Angular flex slider attempt to solve inside partial
<div class="recent_summary clearfix">
<h2>RECENTLY VIEWED</h2>
<div class="nav_carousel">
<div class="carousel mini_thumb_slider">
<ul class="stage_nav">
<li ng-repeat="arrObj in recentItems">
<div ng-repeat="arrItem in arrObj.timestamp track by $index">
<div ng-repeat="(wsitekey,item) in arrItem.sites track by $index">
<flex-slider flex-slide="proMd5 in item.add_to_cart track by $index">
<li>
<div class="product-image mini">
<div class="p_image_innner">
<img ng-src="{{proMd5.image}}" title="{{proMd5.title}} by {{item.info.name}}">
<div class="rateit">
<div class="rateis">
</div>
</div>
<a class="quick-product" data-toggle="modal" data-target="#quick-popup" ng-click="set_current_product_pro(proMd5,item,prokey,wsitekey)">+</a>
</div>
</div>
<div class="caption"><a ng-click="menuShopApi('',item.info.name)">{{item.info.name}}</a></div>
</li>
</flex-slider>
<div ng-repeat="(prokey,proMd5) in item.failed_to_add_to_cart track by $index">
<div class="product-image mini">
<div class="p_image_innner">
<img ng-src="{{proMd5.image}}" title="{{proMd5.title}} by {{item.info.name}}">
<div class="rateit">
<div class="rateis">
</div>
</div>
<a class="quick-product" data-toggle="modal" data-target="#quick-popup" ng-click="set_current_product_pro(proMd5,item,prokey,wsitekey)">+</a>
</div>
</div>
<div class="caption"><a ng-click="menuShopApi('',item.info.name)">{{item.info.name}}</a></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
used scripts
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/flexslider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/jquery.flexslider.js"></script>
<script src="https://rawgit.com/wilsonwc/angular-flexslider/master/angular-flexslider.js"></script>
Use Flexsilder without Angular and try this code:
var slider = $('#slider').data('flexslider');
slider.addSlide(obj, position);
or
$('#slider').flexslider('addSlide', obj[, position]);
Because HTML will be rendering after Flexsilder;
I can't reproduce the AngularStrap's example, here a working plunk
What I get when I integrate this example in my code:
(As you can see it's a bit darker, i don't know why...)
What I'm expecting:
Actually I spent a whole day looking for solution for this but no luck.
guest.html
<body ng-app="module.app">
<div class="container-fluid">
<nav class="navbar navbar-inverse navbar-static-top">
<div topbar></div>
</nav>
<div class="row">
<div ui-view></div>
</div>
</div>
</body>
topBar directive.js :
topBarModule.directive('topbar', function() {
return {
restrict: 'EAC',
templateUrl: 'app/shared/topBar/topBar.html',
controller: 'TopBarController'
//ad controller for more controll logged user etc....
};
});
topBar.html:
<div class="container-fluid">
...
<div class="collapse navbar-collapse">
<button type="button" class="btn btn-lg btn-primary" data-animation="am-fade-and-scale" data-placement="center" bs-modal="modal">Click to toggle modal
<br>
<small>(using an object)</small>
</button>
</div>
...
</div>
topBarController.js:
var topBarModule = angular.module('module.topBar', ['ui.router','mgcrea.ngStrap','ngAnimate','ngSanitize']);
topBarModule.controller('TopBarController', function($cookieStore,$scope,Session,Department,Auth,$window,$modal,$rootScope) {
//..
$rootScope.modal = {title: 'Title', content: 'Hello Modal<br />This is a multiline message!'};
});
I can't see where's the problem, can anyone tell me what's wrong?
I found it, using #dhaval suggestion
The problem is - As mentioned here - that the parent element have a fixed or relative position this behavior will occur..
So just deleted the navbar-static-top attribute and it's work now:
<body ng-app="module.app">
<div class="container-fluid">
<!-- <nav class="navbar navbar-inverse navbar-static-top"> -->
<nav class="navbar navbar-inverse">
<div topbar></div>
</nav>
<div class="row">
<div ui-view></div>
</div>
</div>
</body>
I'm trying to implement a shortlisting functionality in a case where I'm using ng-click inside ng-repeat.
While the $index is being displayed correctly outside the ng-click, $index is only the index of the last object in the JSON array in all the cases where the html is generated using ng-repeat.
I was expecting the respective venue or venue.id to be passed as an argument to shortlistThis(). I'm guessing that this could be an issue related to event binding.
Can someone help me understand what's going wrong here and probably a better way to do this if possible.
I did try checking this Bind ng-model name and ng-click inside ng-repeat in angularjs The fiddle here works just fine but, mine doesn't.
Update: I've found something interesting here. When the shortlist button is placed just under the ng-repeat, it work just as intended. But when, nested inside a div with a ng-class, it isn't working as intended. Can anyone explain and suggest a fix for this ?
//locationsapp.js var locationsApp = angular.module('locationsApp', []);
var venues = [{
id: "Flknm",
name: "ship",
}, {
id: "lelp",
name: "boat",
}, {
id: "myp",
name: "yacht",
}, ];
var shortlistedVenues = [];
var locationsApp = angular.module('locationsApp', ['ui.bootstrap']);
locationsApp.controller("getvenues", function($scope) {
$scope.venues = venues;
$scope.shortlistThis = function(venue) {
console.log(venue);
if (shortlistedVenues.indexOf(venue) == -1) {
shortlistedVenues.push(venue);
//alert('If');
} else {
console.log('already shortlisted')
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="locations" ng-app="locationsApp">
<div ng-controller="getvenues">
<div ng-repeat="venue in venues" ng-mouseover="" class="venue">
<div ng-controller="manageInfo">
<div class="row-fluid">
<div class="control" ng-click="showInfo()">
</div>
<div class="maps" class="info">
<div ng-class="class">
<div class="close-info" ng-click="hideInfo()">
<i class="fa fa-times">
</i>
</div>
<div class="row full-venue-contents" ng-app="ui.bootstrap.demo">
<div class="">
<div class="row-fluid myclass">
<div class="button-holder">
<div class="row-fluid">
<div class="col-md-4 col-xs-4 text-center btn-grid">
<button type="button" class="btn btn-default btn-lg btn-sup" ng-click="shortlistThis(venue)">
Shortlist{{$index}}
</button>
</div>
</div>
</div>
</div>
</div>
<!-- End of Full Info Container -->
</div>
</div>
</div>
</div>
<div class="compare">
<button type="button" class="btn btn-default btn-lg btn-sup">
Compare ( {{shortlistedVenues.length}} )
</button>
</div>
</div>
</div>
</div>
</div>
The problem is with your button div which was position: fixed, it is actually showing the 1st button but clicking on it firing last button click, I'd suggest you should suggest you render only the shortlist button which has been selected by you. For that you can use ng-if and render those button which index is the same as that of selected $index
HTML
<div ng-if="selected==$index" class="button-holder">
<div class="row-fluid">
<div class="col-md-4 col-xs-4 text-center btn-grid">
<button type="button" class="btn btn-default btn-lg btn-sup"
ng-click="shortlistThis($parent.$index)">Shortlist{{$index}}</button>
</div>
</div>
</div>
& then put ng-click="selected='$index'" on ng-repeat div like
<div ng-repeat="venue in venues" class="venue" ng-click="selected=$index">
Working Fiddle
Hope this could help you, Thanks.