I have list of stories with images , content and title in ng-repeat.
When I click on particular story , I need a bootstrap model to open and values to be displayed . I am doing it by calling a function showStories(); But I couldnt do it . I am getting empty value since its globally declared as
$scope.selectedStoryPreview = "";
$scope.selectedStoryContent = "";
$scope.selectedStoryTitle = "";
Html :
<div class="image" ng-repeat="item in filteredStories track by $index">
<img ng-src="{{item.images}}" style="cursor: pointer;" ng-click="showStories(item)" data-toggle="modal" data-target="#storyPreview">
<button><span>{{item.title}}</span>
</button>
</div>
JS:
$scope.showStories = function(item) {
$scope.selectedStoryPreview = item.images;
$scope.selectedStoryContent = item.content;
$scope.selectedStoryTitle = item.title;
}
Modal :
<div class="modal fade" id="storyPreview" role="dialog" data-keyboard="false" data-backdrop="static" style="padding-top: 8em;">
<div class="modal-dialog">
<div class="modal-content" style="text-align: center;">
<div class="modal-header imagemodalhead">
<h4>{{selectedStoryTitle}}</h4>
<a class="edit" ng-click="openmanageprofile()"><img src="css/images/edit.png">
</a>
</div>
<div class="modal-body" style="background: #eee;">
<div class="row">
<img class="file-imageStory" ng-src="{{selectedStoryPreview}}" />
</div>
<br>
<div class="row">
<div class=" col-sm-12 storyPrv">
<span class="styletheStory">{{selectedStoryContent}}</span>
</div>
</div>
<div class="modal-footer imagefooter">
<button type="button" class="button share" ng-click="closePreview()" style="background-color: #7B7D7D; color: black;">close</button>
</div>
</div>
$scope.model is undefined. Set it as $scope.model = {} This way
you can dynamically add properties to it at compile time.
Moreover, you could use data-toggle="modal"
data-target="#viewdetails" as the action event to point to correct
modal.
Also, no need to pass individual properties as arguments in the
method showStories(item), you could send out complete object and
obtain its properties.
DEMO:
Click on the image to open modal.
function MyCtrl($scope) {
$scope.filteredStories = [{
id: 1,
images: 'sample1.png',
title: "sample1",
content: "content here..."
}, {
id: 2,
images: 'sample2.png',
title: "sample2",
content: "content here..."
}, {
id: 3,
images: 'sample3.png',
title: "sample3",
content: "content here..."
}, {
id: 4,
images: 'sample4.png',
title: "sample4",
content: "content here..."
}]
$scope.showStories = function(item) {
$scope.selectedStoryPreview = item.images;
$scope.selectedStoryContent = item.content;
$scope.selectedStoryTitle = item.title;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body ng-app ng-controller="MyCtrl">
<div class="image" ng-repeat="item in filteredStories track by $index">
<img ng-src="{{item.images}}" style="cursor: pointer;" ng-click="showStories(item)" data-toggle="modal" data-target="#storypreview">
<button><span>{{item.title}}</span>
</button>
</div>
<div class="modal fade" id="storypreview" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="text-align: center;">
<div class="modal-header imagemodalhead">
<h4>{{selectedStoryTitle}}</h4>
<a class="edit" ng-click="openmanageprofile()"><img src="css/images/edit.png">
</a>
</div>
<div class="modal-body" style="background: #eee;">
<div class="row">
<img class="file-imageStory" ng-src="{{selectedStoryPreview}}" />
</div>
<br>
<div class="row">
<div class=" col-sm-12 storyPrv">
<span class="styletheStory">{{selectedStoryContent}}</span>
</div>
</div>
<div class="modal-footer imagefooter">
<button type="button" class="button share" ng-click="closePreview()" style="background-color: #7B7D7D; color: black;" data-dismiss="modal">close</button>
</div>
</div>
</div>
</div>
</div>
</body>
If modal controller is different. Then send the value using resolve method. If the controller is same. Then I think it should display the values.
And provide the id of modal here :
<div class="modal-content" id="storyPreview" style="text-align: center;">
Related
on clicking a button I call viewJob function and pass jobId , the response data I am trying to display in bootstrap modal. But I am unable to do it ,the values are assigning as local variable.
Even I tried this in html
{{viewJob(model.citynew)}}
If still you want that as $scope function then try below code:
Controller:
$scope.model = {}
$scope.viewJob = function (jobId) {
UserService.employerJob(jobId).then(function(response) {
if(response.json.response.statuscode == 0) {
$scope.data = response.json.response.data;
$scope.keyskills = $scope.data.keySkill;
$scope.model.citynew = $scope.data.location.city;
$scope.model.numberofpositionsnew = $scope.data.numberOfPositions;
$scope.model.experiencelevelnew = $scope.data.experienceLevel;
$scope.model.link = $scope.data.link;
$('#viewJobModal1').modal('show');
}
});
};
HTML
<div class="modal fade" id="viewJobModal1" role="dialog" tabindex="-1" aria-hidden="true">
<div class="modal-dialog" role="dialog">
<div class="modal-content" id="style-4" style="height:400px;line-height: 1.8;overflow-y: auto;">
<div class="modal-header" style="background-color:#3e79b6;height:50px;">
<div class="col-sm-4" style="font-size:20px;text-align:center;color:white; width: 94.333333% !important;">View Details of Job</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" style="color:black;">×</span>
</button>
</div>
<div class="modal-body" style="height: 400px;line-height: 1.8;">
<div class="col-lg-12">
<div class="col-lg-12" align="center" style="text-align:justify;">
<div class="col-lg-5"><b>Company Name :</b></div>
<div class="col-lg-7" style="text-align:justify;">{{(model.companynew)}}</div>
</div>
<div class="col-lg-12" align="center" style="text-align:justify;">
<div class="col-lg-5"><b>Job title :</b></div>
<div class="col-lg-7" style="text-align:justify;">{{model.jobtitlenew}}</div>
</div>
<div class="col-lg-12" align="center" style="text-align:justify;">
<div class="col-lg-5"><b>Job Description :</b></div>
<div class="col-lg-7" style="text-align:justify;">{{model.jobdescriptionnew}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
I don't think you can use {{viewJob(model.citynew)}} because viewJob takes a jobId as parameter.
It's generally recommended to resolve promises as part of the transition when opening a modal, by passing them in the resolves block.
E.g. Calling the modal in your page's controller
$modal.open({
templateUrl: 'path/to/modal/template.html',
controller: 'ModalCtrl',
controllerAs: 'modalCtrl',
resolve: {
job: function () {
return UserService.employerJob(jobId);
}
}
});
Then, in your ModalCtrl, you can grab the job as a dependency display the data however you want in your template
angular.module('AppModule').controller('ModalCtrl', ['job', function (job) {
modalCtrl = this;
modalCtrl.keyskills = job.keySkill;
modalCtrl.citynew = job.location.city;
modalCtrl.numberofpositionsnew = job.numberOfPositions;
modalCtrl.experiencelevelnew = job.experienceLevel;
modalCtrl.companynew = job.company;
modalCtrl.jobtitlenew = job.jobTitle;
modalCtrl.jobdescriptionnew = job.jobDescription;
modalCtrl.link = job.link;
}]);
And then display these in your modal template
<div class="modal fade" id="viewJobModal1" role="dialog" tabindex="-1" aria-hidden="true">
<div class="modal-dialog" role="dialog">
<div class="modal-content" id="style-4" style="height:400px;line-height: 1.8;overflow-y: auto;">
<div class="modal-header" style="background-color:#3e79b6;height:50px;">
<div class="col-sm-4" style="font-size:20px;text-align:center;color:white; width: 94.333333% !important;">View Details of Job</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" style="color:black;">×</span>
</button>
</div>
<div class="modal-body" style="height: 400px;line-height: 1.8;">
<div class="col-lg-12">
<div class="col-lg-12" align="center" style="text-align:justify;">
<div class="col-lg-5"><b>Company Name :</b></div>
<div class="col-lg-7" style="text-align:justify;">{{(modalCtrl.companynew)}}</div>
</div>
<div class="col-lg-12" align="center" style="text-align:justify;">
<div class="col-lg-5"><b>Job title :</b></div>
<div class="col-lg-7" style="text-align:justify;">{{modalCtrl.jobtitlenew}}</div>
</div>
<div class="col-lg-12" align="center" style="text-align:justify;">
<div class="col-lg-5"><b>Job Description :</b></div>
<div class="col-lg-7" style="text-align:justify;">{{modalCtrl.jobdescriptionnew}} </div>
</div>
</div>
</div>
</div>
</div>
</div>
Hope that helps :)
<div class="modal-dialog modal-lg">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel"> User Details</h4>
</div>
<div class="modal-body">
<div class="panel panel-default">
<div class="panel-body">
{{selected | json}}
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" ng-click="cancel()">Cancel</button>
</div>
</div>
https://plnkr.co/edit/qRJrCcy0KElt2bT4HORc?p=preview
getting { "name": "Mercury", "age": 0.4, "mass": 0.055, "descp": "it is the hottest planet" } in the modal dialog.
how to make it organised in this manner;
name:
age:
mass:
descp:
You can simply do with <li> tag
<div class="panel panel-default">
<div class="panel-body">
<ul>
<li> Age : {{selected.age}}</li>
<li> Name : {{selected.name}}</li>
<li> Mass : {{selected.mass}}</li>
</ul>
</div>
</div>
DEMO WITH PLUNKER
I am using bootstrap and angularjs, I want to show large image on. I clicked image but its not working. How do this? Any built-in library of bootstrap when I show large image.
<html>
<head>
<script type="text/javascript">
$(function() {
$('.pop').on('click', function() {
$('.imagepreview').attr('src', $(this).find('img').attr('src'));
$('#imagemodal').modal('show');
});
});
</script>
</head>
<body>
<a href="#" class="pop">
<img src="http://patyshibuya.com.br/wp-content/uploads/2014/04/04.jpg" style="width: 400px; height: 264px;">
</a>
<a href="#" class="pop">
<img src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" style="width: 400px; height: 264px;">
</a>
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<img src="" class="imagepreview" style="width: 100%;" >
</div>
</div>
</div>
</div>
</body>
</html>
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>
So I have the following simple JSON in my controller:
var app = angular.module('MyApp', []);
app.controller('loadCtrl', function($scope,$http) {
$scope.buttons=[
{Id:'1', type:'First Button'
},
{Id:'2', type:'2nd Button'
},
{Id:'3', type:'3rd Button'
}
];
});
In my view, I have buttons generated by ng-repeat, and modals attached to each button:
<div ng-app="MyApp" ng-controller="loadCtrl" class="container">
<div ng-repeat="button in buttons" class="btn-group">
<div class="btn btn-sq-lg btn-primary" data-toggle="modal" ng-attr-data-target="{{button.type+'Opts'}}">{{button.type}}
</div>
<!-- Modal -->
<div ng-attr-id="{{button.type+'Opts'}}" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{button.type}}</h4>
<h5> Record:{{date | date:'yyyy-MM-dd-HH:mm:ss'}}</h5>
</div>
<div class="modal-body">
<textarea name="Reason" class="form-control" rows="5" style="min-width: 100%"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
But for some reason, the modal just does not show up. I tried adding ng-show attribute, but that didn't work either. Somehow the ids aren't being generated properly.
You need to include the id selector '#' in data-target attribute, also for the selector to work button type needs no space.
<div ng-app="MyApp" ng-controller="loadCtrl" class="container">
<div ng-repeat="button in buttons" class="btn-group">
<div class="btn btn-sq-lg btn-primary" data-toggle="modal" data-target="{{'#' + button.type+'Opts'}}">{{button.type}}
</div>
<!-- Modal -->
<div id="{{button.type+'Opts'}}" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{button.type}}</h4>
<h5> Record:{{date | date:'yyyy-MM-dd-HH:mm:ss'}}</h5>
</div>
<div class="modal-body">
<textarea name="Reason" class="form-control" rows="5" style="min-width: 100%"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Controller :
var app = angular.module('MyApp', []);
app.controller('loadCtrl', ['$scope', '$http', function($scope, $http) {
$scope.buttons = [{
Id: '1',
type: 'FirstButton'
}, {
Id: '2',
type: '2ndButton'
}, {
Id: '3',
type: '3rdButton'
}];
}]);
See working demo here