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>
Related
I tried to do this as:
var data = [];
ngDialog.open({ id: 'fromAService', template: 'firstDialogId', controller: 'PrototypeController', data : data});
In template I tried to get:
<script type="text/ng-template" id="firstDialogId">
<div class="ngdialog-message">
<h3>Error</h3>
$$data$$
<p><button class="inline btn btn-success close-this-dialog" ng-click="closeThisDialog()">Close</button></p>
</div>
</script>
It shows empty object {}
The data you pass to the data property is then available under $scope.ngDialogData. Look at the example below.
Open ngDialog
ngDialog.open({
// your dialog configuration
data: {
myProperty: 'test'
}
});
ngDialog Template
<div class="ngdialog-message">
<h3>Error</h3>
{{ ngDialogData.myProperty }}
<p><button class="inline btn btn-success close-this-dialog" ng-click="closeThisDialog()">Close</button></p>
</div>
For more details, please refer to the Official Documentation.
<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.
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.
I am displaying some data on my html page inside a div using ng-repeat. Inside the div I have a button in order to hide the content of each div seperately.Here is a simplified version of my html file.
<body ng-app="task" ng-controller="repeat">
<div ng-repeat='x in array' ng-show="{{ x.show }}">
<p>{{ x.text }}
</p>
<button ng-click="toggle()">Hide</button>
</div>
</body>
the code in my .js file is as follows
var app = angular.module('task');
app.controller('repeat',function($scope){
$scope.array = [{
show: true,
text:'Sample Text 1'},
{
show: true,
text:'Sample Text 2'},
{
show: true,
text:'Sample Text 3'}];
$scope.toggle = function(){
$scope.array.show = false ;
};
})
Can anyone suggest me the required changes so that on clicking the button inside my div , that particular div gets hidden.
I think I am committing a mistake in referencing the particular element of the array while calling the function toggle() through ng-click
Put your element as an argument in toggle function.
<button ng-click="toggle(x)">Hide</button>
and change it in controller like this:
$scope.toggle = function(x){
x.show = !x.show;
};
And easy to achieve this without calling the function in the controller:
<body ng-app="task" ng-controller="repeat">
<div ng-repeat='x in array' ng-show="showDetail">
<p>{{ x.text }}</p>
<button ng-click="showDetail != showDetail">Hide</button>
</div>
</body>
The method above will also hide the button if you click hide. If you want to hide your content and show it again, the following code can achieve that:
<body ng-app="task" ng-controller="repeat>
<div ng-repeat='x in array'>
<div class="content" ng-show="showContent">
<p>{{ x.text }}</p>
</div>
<div class='btn btn-control'>
<button ng-click="showContent != showContent"> Hide </button>
</div>
</div>
</body>
Well I found a way to actually cater my needs , thank you all for your suggestions. Here is the code I actually used:
<body ng-app="task" ng-controller="repeat">
<div ng-repeat='x in array' ng-hide="x.show">
<p>{{ x.text }}
</p>
<button ng-click="toggle($index)">Hide</button>
</div>
</body>
and in my js file I used it like this:
var app = angular.module('task');
app.controller('repeat',function($scope){
$scope.array = [{
show: true,
text:'Sample Text 1'},
{
show: true,
text:'Sample Text 2'},
{
show: true,
text:'Sample Text 3'}];
$scope.toggle = function(){
$scope.array[index].show = false ;
};
})
In your html pass
<button ng-click="toggle(x.$index)">Hide</button>
While in js
$scope.toggle = function(index){
$scope.array[index].show = !$scope.array[index].show;
};