I am trying to correct the following ui-grid:
To display just the information I want from object alquiler and object usuario, both of these are contained within a Rent (UsuarioHasAlquiler) object.
I tried the following:
'use strict';
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'resources/view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', ['$scope','$http',function($scope,$http) {
$scope.rents = [];
$scope.requestObject = {"pageNumber": 0,"pageSize": 0,"direction": "","sortBy": [""],"searchColumn": "string","searchTerm": "","userRent": {}};
$http.post('rest/protected/userRent/getAll',$scope.requestObject).success(function(response) {
console.log("response",response)
$scope.rents = response.usuarRent;
console.log("$scope.items",$scope.rents[1])
// console.log("Tipo de usuario:", $scope.usuarios.tipos)
});
$scope.gridOptions = { data: rents,
columnDefs: [{ field: 'idUsuarioHasAlquiler', displayName: 'ID'},
{ field: 'usuario.firstname', displayName: 'First Name'},
{ field: 'alquiler.name', displayName: 'Item Name'},
{ field: 'estado_renta', displayName: 'Returned'}]
};
}]);
And while the request is succesful I am not able to extract just what I want from the objects to display on the grid.
<div class="container">
<div class="container">
<h3 class="text-center">Rents</h3>
<hr>
</div>
<div class="container">
<div class="row">
<div ui-grid="gridOptions" class="myGrid"></div>
<br>
<button type="button" ng-click="" class="btn btn-primary">Add</button>
<button type="button" ng-click="" class="btn btn-success">Edit</button>
<button type="button" ng-click="" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
I was hoping someone could point me in the right direction. Thanks and sorry for the spanish.
I created a plunker based on your data, and it's working fine. The only difference between your version and the working version, as far as I can tell, is that you have set $scope.gridOptions.data to rents, rather than to $scope.rents.
The only way I can recreate your issue is to set ui-grid="{data:rents}" in your html, which doesn't apply your column definitions to the grid. Did you by chance copy data:rents out of the ui-grid attribute and paste it into your $scope.gridOptions object? In this case, nothing at all should show up because rents is undefined.
Related
I'm trying to dynamically populate the data-title and the data-content of a Bootstrap popover from a JSON create in an AngularJS controller.
Controller Snippet:
$scope.popoverContent = {name: {title: "title", content: "content"}}
HTML Snippet:
<span class="glyphicon glyphicon-question-sign"
aria-hidden="true"
data-toggle="popover"
data-trigger="hover"
data-title="{{popoverContent.name.title}}"
data-placement="right"
data-content="{{popoverContent.name.content}}">
</span>
I'm getting the exact text between the double quotes in the HTML page, {{popoverContent.name.title}}.
I've tried with ng-attr-data-title="{{popoverContent.name.title}}" but in this case, the title does not get displayed at all.
Other variables set in the controller are getting displayed properly in the HTML page.
Is is possible to implement something like this?
Try this code
var demo = angular.module('demo', []);
demo.controller('loadData', function($scope){
$scope.uploadData = function() {
$scope.popoverContent = {name: {title: "title", content: "content"}};
};
});
demo.directive("popUps",function(){
return {
restrict:'E',
replace: true,
transclude: false,
template:'<span class="glyphicon glyphicon-question-sign" aria-hidden="true" data-toggle="popover" data-trigger="hover" data-title="{{popoverContent.name.title}}" data-placement="right" data-content="{{popoverContent.name.content}}">data-title:{{popoverContent.name.title}}</br>data-content:{{popoverContent.name.content}}</span>'
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<div ng-app='demo'>
<div ng-controller='loadData'>
<button ng-click='uploadData($event)' >show</button>
<div>
<pop-ups></pop-ups>
</div>
</div>
</div>
I have the following code which displays a static JSON object in a grid.
var app = angular.module('app', ['ui.bootstrap']);
app.controller('ModalInstanceCtrl', function($scope, $modalInstance, customer) {
$scope.customer = customer;
});
app.controller('CustomerController', function($scope, $timeout, $modal, $log) {
$scope.customers = [{
name: 'Movie Title 1',
details: 'http://image.tmdb.org/t/p/w342//lFSSLTlFozwpaGlO31OoUeirBgQ.jpg',
}, {
name: 'Movie Title 2',
details: 'http://image.tmdb.org/t/p/w342//tgfRDJs5PFW20Aoh1orEzuxW8cN.jpg',
}, {
name: 'Movie Title 3',
details: 'http://image.tmdb.org/t/p/w342//wJXku1YhMKeuzYNEHux7XtaYPsE.jpg',
}];
// MODAL WINDOW
$scope.open = function(_customer) {
var modalInstance = $modal.open({
controller: "ModalInstanceCtrl",
templateUrl: 'myModalContent.html',
resolve: {
customer: function() {
return _customer;
}
}
});
};
});
I need to be able to use this RESTful API source:
$http.get("http://api.themoviedb.org/3/movie/now_playing?api_key=ebea8cfca72fdff8d2624ad7bbf78e4c")
.success(function(response) {
console.log(response);
$scope.results = response.results;
});
and enable the click event to trigger the modal as it does now, except it needs to grab the details of each of the items in the JSON object and display in the modal.
The ng-repeat:
<div class="container">
<div class="row">
<div ng-repeat="items in results">
<img class="col-lg-3 col-md-3 col-sm-3 col-xs-12 thumbnail" ng-src="http://image.tmdb.org/t/p/w342/{{items.poster_path}}">
</div>
</div>
</div>
Using this fiddle: http://jsfiddle.net/8s9ss/224/ as a base, I need to have the buttons replaced by the images coming through the REST API and they should trigger a modal on click.
This should be all you need
<div ng-repeat="items in results">
<a ng-click="open(items)" class="col-lg-3 col-md-3 col-sm-3 col-xs-12 thumbnail">
<img ng-if="items.poster_path" ng-src="http://image.tmdb.org/t/p/w342/{{items.poster_path}}">
<div class="caption" ng-hide="items.poster_path">
<h3>{{items.title}}</h3>
</div>
</a>
</div>
You'll need to tweak your modal template to show the different properties but you should be able to figure it out.
http://jsfiddle.net/8s9ss/229/
I'm learning angularJS and I'm having an issue trying to use ng-repeat.I know that the template and controller are loading because I did a console.log(self.post) test that shows the single post that I expect from the demoSuggestions and the template loads the comCtrl.post.title that I expect. But the ng-repeat='comment in comCtrl.post.comments doesn't show anything. Any ideas as to what I'm doing wrong?
HTML
<script type='text/ng-template' id='/suggestions.html'>
<div class='row' ng-controller='commentsController as comCtrl'>
<div class='col-xs-12'>
<div class='commentTitle'>
<h3 class='text-center'>{{comCtrl.post.title}}</h3>
</div><!--End of commentTitle-->
</div><!--End of col-->
</div><!--End of row-->
<div class='row' ng-repeat='comment in comCtrl.post.comments'>
<div class='col-xs-12 col-sm-10 col-sm-offset-1'>
<div class='commentContainer'>
<div class='row'>
<div class='col-xs-3 col-sm-2 col-md-1'>
<div class='thumbsUp'>
<i class="fa fa-thumbs-up" ng-click='comCtrl.upVote($index)'></i>
<span>{{comment.upvotes}}</span>
</div><!--End of thumbsUp-->
</div><!--End of col-->
<div class='col-xs-9 col-sm-10 col-md-11'>
<div class='commentBody'>
<span>{{comment.body}}</span>
</div><!--End of commentBody-->
</div><!--End of col-->
</div><!--End of row-->
</div><!--End of commentContainer-->
</div><!--End of col-->
</div><!--End of row-->
<div class='row'>
<div class='col-xs-12'>
<form id='comment' ng-submit="addComment()" style="margin-top: 50px">
<h3> Submit Your Comment </h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="Place comment here" ng-model="body"></input>
</div><!--End of form-group-->
<button type="submit" class="btn btn-danger">Suggest</button>
</form>
</div><!--End of col-->
</div><!--End of row-->
</script>
Module & config
var suggestionApp = angular.module('suggestionBox', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/home.html',
})
.when('/suggestion/:id',{
templateUrl:'/suggestions.html'
})
.otherwise({
redirectTo:'/'
});
}]);
Controller & Service
.controller('commentsController',['$routeParams','suggestions', function($routeParams, suggestions){
var self = this;
var swap = 1;
self.post = suggestions.posts[$routeParams.id];
console.log(self.post)
self.addComment = function() {
self.post.comments.push({
body:self.body,
upvotes:0
});
};
self.upVote=function(index){
if(swap)
{
self.post.comments[index].upvotes += 1;
$('.thumbsUp .fa').eq(index).css('color','red');
swap=0;
}
else
{
self.post.comments[index].upvotes -= 1;
$('.thumbsUp .fa').eq(index).css('color', 'black');
swap=1;
}
};
}])
.factory('suggestions', [function(){
var demoSuggestions = {
posts: [
{
title: 'Term limits on congress',
avatar:'https://upload.wikimedia.org/wikipedia/commons/7/7a/US_Navy_040521-N-9909C-006_Established_by_the_American_Battle_Monuments_Commission,_the_memorial_honors_all_military_veterans_of_World_War_II.jpg',
upvotes: 15,
comments: [
{body:'love the idea',upvotes:0},
{body:'let\'s make this happen', upvotes:0},
]
},
{
title: 'Every two years a popular vote on two issues that passes into law without Congress.',
avatar:'https://upload.wikimedia.org/wikipedia/commons/3/3e/The_Marine_Corps_War_Memorial_in_Arlington,_Va.,_can_be_seen_prior_to_the_Sunset_Parade_June_4,_2013_130604-M-MM982-036.jpg',
upvotes: 9,
comments: [
{body:'Only if the judicial branch still rules on its constitutionality.', upvotes:0},
{body:'Do you really think people would come out to vote?', upvotes:0},
{body:'I\'d be down for this',upvotes:0}
]
},
{
title: 'Create a biometric scanner for all those entering the country.',
avatar:'https://upload.wikimedia.org/wikipedia/commons/e/ea/Washington_Monument_-_01.jpg',
upvotes: 7,
comments:[
{body:'Seriously, not cost effective', upvotes:0},
],
},
{
title: 'Become more isolationist and bring our troops back home.',
avatar:'https://upload.wikimedia.org/wikipedia/commons/3/3b/Bunker_hill_2009.JPG',
upvotes: 3,
comments: [
{body:'sounds a little grim',upvotes:0}
],
}
]
};
return demoSuggestions;
}]);
If you look at the first two divs with the class row, you will notice, that the first div has a ng-controller attached (and displaying your title) and the second one has no controller attached (and displays nothing).
As your ng-repeat is not a child-element of your row with the controller, you cannot use your controller there. You could solve that if you move the ng-controller up one element so it will be on the parent of all your rows.
<ion-list>
<ion-item>
<div id="result_1" class="result">
<p class="title" ng-repeat="item in result | filter: query">
<span class="ic"><b>{{item.name}}</b></span>
Click for details...
</p>
<div class="clear"></div>
</div>
</ion-item>
</ion-list>
this is a part of my first Ionic project, i'm new in this framework and AngularJs, so I have a controller which searchs for data in a json file.
I need to open a modal when user clicks on
Click for details...
but when I searched about it, I figured out that I need another controller for creating a modal.
I already have a controller in my whole page, how can I add another controller to that specific line? Or do you know any other way to create a modal without using another controller?
<ion-item>
<div id="result_1" class="result">
<p class="title" ng-repeat="item in result | filter: query">
<span class="ic"><b>{{item.name}}</b></span>
<br>
<br>
<span ng-click="popUp()" class="ic1">Click for details...</span>
</p>
<div class="clear"></div>
</div>
</ion-item>
script:
using $ionicPopup
$scope.popUp = function() {
var alertPopup = $ionicPopup.alert({
title: 'More Details...',
template: 'decription', // templateUrl:'myModalContent.html'
buttons: [{
text: '<b>OK</b>',
type: 'button-assertive'
}]
});
};
check this link for Details
using Ui bootstrap
$scope.popUp = function() {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html'
resolve: {
data: function() {
return $scope.data;
}
}
});
}
There are many options you can pass. You can give a controller for your pop up too.
check this link for ui.bootstrap.modal
I am trying to pass some data with a function to display on a modal, yet the usual approaches to binding are not working, I was hoping someone could point me in the right direction.
$scope.openModal = function (obj) {
//$scope.data = {type: obj.type, descriptions: obj.description, isDone: obj.isDone, createDate: obj.createDate, priority: obj.priority};
$scope.data = obj;
console.log($scope.data);
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'modalTemplate.html',
controller: 'View1Ctrl',
resolve: {
data: function () {
return $scope.data;
}
}
});
}
Template
<!-- MODAL -->
<div>
<div ng-controller="View1Ctrl">
<script type="text/ng-template" id="modalTemplate.html">
<div class="modal-header">
<h3 class="modal-title">Item Details</h3>
</div>
<div class="modal-body">
<ul>
<li>Type: <span ng-model="data.type"></span></li>
<li>Description: <span ng-model="data.description"></span></li>
<li>Date: <span ng-model="data.createDate"></span></li>
<li>Priority: <span ng-model="data.priority"></span></li>
<li>Finished: <span ng-model="data.isDone"></span></li>
</ul>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="$close()">OK</button>
</div>
</script>
</div>
Also tried {{data.type}} etc, and ng-bind. I now my $scope.data is populated because it is showing as much in the console.
You should inject data (resolve object) into your modal controller then add it to the $scope object.
You should remove ng-controller="View1Ctrl" from template.