I open an alert dialog with ok button. On click calls a function. I need to call the same function when I close the alert dialog
<script type="text/ng-template" id="alertErrorTemplate.html">
<div class="form-wrp">
<div class="form-item">
<h2 class="box-title error-text" ng-class="{'box-left': leftAlign}"><span data-ng-bind="Web_Error" ng-show="showTitleText">Error: </span>{{alertText}}</h2>
<h2 class="box-text error-text" ng-class="{'box-left': leftAlign}" ng-show="secondaryText !== null">{{secondaryText}}</h2>
<div ng-show="alertItemList && alertItemList.length > 0" class="dialog-error-list error-text">
<ul>
<li ng-repeat="item in alertItemList">
{{ item }}
</li>
</ul>
</div>
</div>
<div class="form-item text-center">
<button ng-click="closeNgDialog()" class="btn btn-success btn-big" data-ng-bind="Web_OK">OK</button>
</div>
</div>
</script>
You can listen to 'ngDialog.closing' event like this :
$scope.$on('ngDialog.closing', function () {
//do what ever you want.
});
Related
I am using ng-click and ng-show for pagination. In this case it keeps on creating new pages in both direction when ever buttons are clicked i.e it keeps on creating blank pages. It should stop at first and last page respectively. Here I have created three sub-pages for pagination the buttons should play only for this three sub pages.
Looking forward for any help.
thank you.
<div class="container" ng-app="tabApp">
<div class="row" ng-controller="TabController">
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li>
<a href ng-click="setTab(tab+1)" class="btn btn-primary btn-lg" role="button">Next</a>
</li>
<li>
<a href ng-click="setTab(tab-1)" class="btn btn-primary btn-lg" role="button">Back</a>
</li>
</ul>
</div>
<div class="col-md-8">
<div class="jumbotron">
<div ng-show="isSet(1)">
<h1>Home page</h1>
<p>Welcome to the website!</p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>
<div ng-show="isSet(2)">
<h1>Profile page</h1>
<p>Profile information</p>
</div>
<div ng-show="isSet(3)">
<h1>Messages</h1>
<p> Some messages </p>
</div>
</div>
</div>
</div>
</div>
<script>
angular.module('tabApp', [])
.controller('TabController', ['$scope', function($scope) {
$scope.tab = 1;
$scope.setTab = function(newTab) {
$scope.tab = newTab;
};
$scope.isSet = function(tabNum) {
return $scope.tab === tabNum;
};
}]);
</script>
I have created a codepen
I'm trying to put to a modal the attributes of a clicked table row. I am using angularjs. Nothing happens in my code:
Basically this is my html code like below:
<tr ng-repeat="pokemons in pokemon">
<td>{{pokemons.pokemon_number}}</td>
<td>{{pokemons.pokemon_name}}</td>
<td>{{pokemons.type1}}</td>
<td>{{pokemons.type2}}</td>
</tr>
Then this is in my script tag:
var myApp = angular.module('myApp', [])
myApp.controller('SimpleController', ['$scope', '$http', function($scope, $http) {
$scope.findPokemon = function(filterKey){
$http.get('pokemon/search-by-name/' + filterKey).then(function(response) {
$scope.pokemon = response.data
})
}
$scope.getDetails = function(pokemons){
$scope.pokemonDetails = pokemons
$('#viewModal').modal('show');
}
}]) `
Modal:
<div id="pokemon-zoom" class="modal">
<div class="modal-content animate">
<div class="imgcontainer">
<span onclick="document.getElementById('pokemon-zoom').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="modal-container">
<img id="pokemon-image" src="Bulbasaur.jpg" height="200px" width="200px">
<div class="pokemon-details">
<h1>Pokemon Data</h1>
<div id="pokemon-data-text">
<p>Pokemon no: {{pokemonDetails.pokemon_number}}</p>
<p>Type1: {{pokemonDetails.type1}}</p>
<p>Type2: {{pokemonDetails.type12}}</p>
<p></p>
</div>
</div>
<div class="options">
<button class="options-link" href="#">Edit</a>
<button class="options-link" href="#">Delete</a>
</div>
</div>
</div>
</div>
Btw some parts there seem unnecessary i just included them
Here is the answer for your problem
HTML
<table>
<tr ng-repeat="pokemons in pokemon">
<td>{{pokemons.pokemon_number}}</td>
<td>
<button type="button" class="btn btn-default"
style="width:100px; height:25px"
ng-click="openModal(pokemons)"
data-toggle="modal" data-target="#pokemon-zoom" >
{{pokemons.pokemon_name}}</button>
</td>
<td>{{pokemons.type1}}</td>
<td>{{pokemons.type2}}</td>
</tr>
</table>
Modal Code is this
<div id="pokemon-zoom" class="modal">
<div class="modal-content animate">
<div class="imgcontainer">
<span onclick="document.getElementById('pokemon-zoom').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="modal-container">
<img id="pokemon-image" src="Bulbasaur.jpg" height="200px" width="200px">
<div class="pokemon-details">
<h1>Pokemon Data of</h1>
<div id="pokemon-data-text">
<p>Pokemon no: {{selected_pokemon.pokemon_number}}</p>
<p>Type1: {{selected_pokemon.type1}}</p>
<p>Type2: {{selected_pokemon.type12}}</p>
<p></p>
</div>
</div>
<div class="options">
<button class="options-link" href="#">Edit</button>
<button class="options-link" href="#">Delete</button>
</div>
</div>
</div>
</div>
your controller will be having a method with name openModal
$scope.openModal=function (ob){
$scope.selected_pokemon=ob;
}
Here is a LIVE DEMO
You're trying to show the modal by calling $('#viewModal').modal('show');, but your modal has id pokemon-zoom. Show the modal by calling $('#pokemon-zoom').modal('show');
Make sure the modal is defined within the scope of the Controller SimpleController so that it can access pokemonDetails!
I have a editable-select nested inside other, when I submit the nested editable-select changes, it does not call the onaftersave assigned function ('vm.addOperation()'), it also shows the outter editable-select edit form.
I want it just to show the nested edit form and the function call to work.
My html code:
<div editable-select="vm.selectedUser"
e-ng-options="user.objectId as user.displayName for user in vm.users"
onshow="vm.getUsers()"
onaftersave="vm.addUser()">
<div class="container" ng-repeat="u in entity.authorizedUsers">
<div class="row">
<div class="col-xs-2">
{{u.id}}
</div>
<div class="col-xs-4">
<div editable-select="vm.selectedOperation"
e-ng-options="operation.id as operation.name for operation in vm.operations"
onshow="vm.getOperations()"
onaftersave="vm.addOperation()">
<div class="container" ng-repeat="op in u.authorizedOperations">
<div class="row">
<div class="col-xs-3">
{{op.name}}
</div>
<div class="col-xs-push-2">
<button class="btn btn-xs btn-danger"
ng-click="vm.removeOperation(entity.id, u.id, op.id)">
<i class="fa fa-trash-o"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-push-4">
<button class="btn btn-xs btn-warning pull-left"
ng-click="vm.removeuser(entity.id, u.id)">
<i class="fa fa-trash-o"></i>
</button>
</div>
</div>
</div>
</div>
I've manage to fix the problem with the following code. It's an ugly workaround tho, please if someone has a more elegant solution I'd very much appreciate it.
in html:
<div editable-select="vm.selectedOperation"
e-form ="nestedForm"
onshow="vm.getOperations()"
ng-click="nestedForm.$show(); vm.xEditableNestedFormFix(nestedForm); $event.stopPropagation()"
e-ng-options="operation.id as operation.name for operation in vm.operations"
onaftersave="vm.addOperation()">
in js:
vm.xEditableNestedFormFix = function (form) {
var editorElement = form.$editables[0].controlsEl[0].firstChild;
editorElement.onclick = function (event) {
event.stopPropagation();
}
var submitButton = form.$editables[0].buttonsEl[0].firstChild
submitButton.onclick = function (event) {
form.$submit();
event.stopPropagation();
}
var cancelButton = form.$editables[0].buttonsEl[0].lastChild
cancelButton.onclick = function (event) {
event.stopPropagation();
}
}
I have angular project My Requirement is : How to display data after update on my UI without refreshing, Data store in server i want it to display on Contact and Recent Tab immediately after Updating.
UI Bindings:
<li class="media contact-card">
<div class="media-left">
<a ui-sref=".viewClient({'clientId':client._id})">
<img class="media-object img-circle" src="https://placehold.it/42x42" alt="https://placehold.it/64x64">
<!--<div class="circle" ng-class="getRandomColorClass('Xipesh Gandhi')"><p>{{generateInitialChar('Dipesh Gandhi')}}</p></div>-->
</a>
</div>
<div class="media-body">
<div class="pull-left">
<h4 class="media-heading pull-left">{{client.firstName}} {{client.lastName}}</h4>
</div>
<div class="pull-right">
<a class="" ui-sref=".editClient({'clientId':client._id})"> <i class="glyphicon glyphicon-pencil" ></i></a>
<a class=""> <i class="glyphicon glyphicon-trash" ></i></a>
</div>
<div class="clearfix"></div>
<span>{{client.address}}</span>
<span>{{client.birthDate | date:'mediumDate'}}</span>
</div>
</li>
View :
<div class="tab-wrapper">
<tabset justified="true">
<tab heading="CONTACTS">
<div class="tab-content">
<div>
<div class="pull-right">
<a class="add-client-link" ui-sref=".client"> <i class="glyphicon glyphicon-plus" ></i> Add Contact </a>
</div>
<div class="clearfix"></div>
</div>
<div class="hr"></div>
<div class="scrollable-container">
<ul class="media-list">
<contact-card data-client="client" ng-repeat="client in clientList"></contact-card>
</ul>
</div>
</div>
</tab>
<tab heading="RECENT">
<div class="tab-content">
<div>
<div class="pull-right">
<a class="add-client-link" ui-sref=".client"> <i class="glyphicon glyphicon-plus" ></i> Create Meeting </a>
</div>
<div class="clearfix"></div>
</div>
<div class="hr"></div>
<div class="scrollable-container">
<ul class="media-list">
<contact-card data-client="client" ng-repeat="client in clientList"></contact-card>
</ul>
</div>
</div>
</tab>
</tabset>
</div>
Controller:
$scope.updateClientList = function(client, operation){
if(operations.ADD === operation){
//$scope.clientList.push({firstname: $scope.client.firstName, lastname: $scope.client.lastName});
//$scope.clientList.push(client);
$scope.clientList.push (client);
// $scope.clientList = [];
} else if(operations.EDIT === operation){
} else if(operations.DELETE === operation){
}
$state.go('meeting-home.viewClient', {'clientId':client._id});
};
Does anyone know how to do it?
Please comment $scope.clientList = []; in your code. it will work. Any how you are not mentioning UI binding details.
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.