I'm trying to have a button that brings a user to the product details but id also like the button to increment a counter through an ng-click function
<div class="row center-block save-button" >
<a data-ng-href="/savings/{{saving._id}}" >
<md-button aria-label="button" ng-click="upVoteHome(saving)" type="button" class="save-button-md">Save</md-button>
</a>
</div>
The ng-click here has no effect and never cllas the function.
How do I combine the two?
Thanks
do this:
<div class="row center-block save-button" >
<md-button aria-label="button" ng-click="upVoteHome(saving, {{saving._id}})" type="button" class="save-button-md">Save</md-button>
</div>
and then in the upVoteHome function incremment the counter and then redirect to the url that is passed.
my suggestion is remove the ng-href, and handle only the click
<div class="row center-block save-button" >
<md-button aria-label="button" ng-click="upVoteHome(saving)" type="button" class="save-button-md">Save</md-button>
</div>
in your controller code you can redirect the user to another view
$scope. upVoteHome = function ( saving ) {
//YOUR EXISTING CODE HERE
$location.path( '/savings/' + saving._id );
};
Related
Here I'm trying to send a http request to my spring controller once an icon is clicked that is displayed with a validation for a model attribute.
<div class="col-sm-4 col-sm-offset-1 page-title-section"></div>
<c:if test="${viewUsers}">
<div class="col-sm-4 page-actions-section">
<div class="page-actions">
<div class="page-action">
<a id="loadUserIcon">
<i class="fa fa-plus fa-2x"></i>
<h5>Add User</h5>
</a>
</div>
</div>
</div>
</c:if>
<c:if test="${viewRoles}">
<div class="col-sm-4 page-actions-section">
<div class="page-actions">
<div class="page-action">
<a id="loadRoleIcon">
<i class="fa fa-plus fa-2x"></i>
<h5>Add Role</h5>
</a>
</div>
</div>
</div>
</c:if>
</div>
The js to send the request once the icon is clicked :
(function() {
document.getElementById("loadUserIcon").onclick = function() {
window.location = 'loadUser?id=' + 0;
};
})();
(function() {
document.getElementById("loadRoleIcon").onclick = function() {
window.location = 'loadRole?id=' + 0;
};
})();
So now the separate icons are displayed with each model attribute validation and the first function is invoked once the 'Add User' icon is clicked but i cant seem to invoke this second function even though the icon is displayed with the model attribute validation. What could have been gone wrong here?
The error on the console once the 'Add Role' icon is clicked :
Uncaught TypeError: Cannot set property 'onclick' of null
at load:496
at load:500
these line numbers are directed to the second js function
Any error on console ?
Where you put the scripts?
You should put them into body.onload handler or just before the end tag </body>.
Include your JavaScript code, either at below the </body> tag, or load the functions upon DOM ready or onload.
I changed the code a bit for JSFiddle and its working fine, check here: https://jsfiddle.net/045L2xvj/
<div class="col-sm-4 col-sm-offset-1 page-title-section"></div>
<div class="col-sm-4 page-actions-section">
<div class="page-actions">
<div class="page-action">
<a href="#" id="loadUserIcon">
<h5>Add User</h5>
</a>
</div>
</div>
</div>
<div class="col-sm-4 page-actions-section">
<div class="page-actions">
<div class="page-action">
<a href="#" id="loadRoleIcon">
<h5>Add Role</h5>
</a>
</div>
</div>
</div>
And JS code:
(function() {
document.getElementById("loadUserIcon").onclick = function() {
alert('Add user');
};
})();
(function() {
document.getElementById("loadRoleIcon").onclick = function() {
alert('Add role');
};
})();
I just needed to wrap the js functions too with the model attribute validation to eliminate elements getting null.
<c:if test="${viewUsers}">
<script>
document.getElementById('loadUserIcon').onclick = function () {
window.location = 'loadUser?id=' + 0;
};
</script>
</c:if>
<c:if test="${viewRoles}">
<script>
document.getElementById('loadRoleIcon').onclick = function () {
window.location = 'loadRole?id=' + 0;
};
</script>
</c:if>
I am wanting to have the Resolve Ticket Button showing when the open item is an Incident. When I click Resolve Ticket, I want Cancel and Confirm buttons to show. However, when you click Cancel I need Resolve Ticket to show again. I can get Cancel/Confirm to show, but clicking Cancel does nothing. The HTML is below.
<div class="panel b" ng-if="c.data.isIncident == true">
<div class="panel-heading bg-primary">
<div class="panel-title">Is this no longer an issue?</div>
</div>
<div class="panel-body">
<div ng-if="!c.data.isDialogOpen">
<a class="btn btn-primary" ng click="c.openConfirmDialog()">Resolve Ticket</a>
</div>
<div ng-if="c.data.isDialogOpen">
<a class="btn btn-primary" ng-click="!c.openConfirmDialog()">Cancel</a>
<a class="btn btn-primary" ng-click="c.openConfirmDialog()">Confirm</a>
</div>
</div>
</div>
The AngularJS function is
function($location) {
/*widget conotroller */
var c = this;
c.data.isIncident = false
if ($location.search().table == 'incident'){
c.data.isIncident = true
}
c.openConfirmDialog = function(){
c.data.isDialogOpen = true;
}
}
Try this:
<a class="btn btn-primary" ng-click="c.data.isDialogOpen = false; c.data.isIncident = true">Cancel</a>
I'm not sure what you were trying to do with !c.openConfirmDialog() but this will definitely not undo what the function did when it was called before.
i have html div where i use ng-repeat that gives me back elements from array
<div>
<div class="col-sm-3" ng-repeat="el in vm.filmovi " id="filmovi">
<img src="http://image.tmdb.org/t/p/w500/{{el.poster_path}}" style="width:100%;"><br>
<a ng-click="vm.set_favorit(el)" style="cursor:hand; color:white;" uib-tooltip="Postavi u omiljene">
<i class="glyphicon" ng-class="{'glyphicon-star-empty':el.favorit!=true, 'glyphicon-star':el.favorit==true}"
aria-hidden="true"></i></a>
<a href="http://www.imdb.com/title/{{el.imdb_id}}/" style="color:white;">
<strong>{{ el.title | limitTo: 20 }}{{el.title.length > 20 ? '...' : ''}}</strong></a>
<a class="glyphicon glyphicon-share-alt" style="margin-left:5px; color:white;" ng-click="vm.open()" uib-tooltip="share" ></a><br>
{{el.popularity}} <br>
<a style="color:white;" href="#" ng-click="vm.filter(genre)" ng-repeat="genre in el.genres"><small>{{genre.name}} </small></a>
<div ng-init="x = 0">
<span uib-rating ng-model="x" max="5"
state-on="'glyphicon-star'"
state-off="'glyphicon-star-empty'"></span></div>
</div>
</div>
now i created a button that changes value of id "filmovi"
<li><a href="#" ng-hide="vm.ulogovan" ng-click="vm.dugme();" >losta</a></li>
and created function vm.dugme() that gets element by id and sets class atribute to col-sm-4
vm.dugme=function(){
document.getElementById("filmovi").setAttribute("class","col-sm-4");
};
but when i did that only the first element changed
but i need for all of them to change to col-sm-4 , any suggestion?
Don't do DOM manipulation from angularjs controller. Instead make use of directive provided by angular.
You could use ng-class with expression so that whenever expression gets satiesfied the class will be added over that DOM. To add class put addColSm4 flag inside a controller and change that flag from dugme method of your controller. Also by looking at screenshot it seems like you need col-sm-3 class at the beginning, afterwards you need to apply col-sm-4.
HTML
<div class="row">
<div class="col-sm-3" ng-repeat="el in vm.filmovi"
ng-class="{'col-sm-4': vm.addColSm4, 'col-sm-3': !vm.addColSm4 }" >
.. Html will stay as is ..
</div>
</div>
<li>
<a href="#" ng-hide="vm.ulogovan"
ng-click="vm.dugme()">
losta
</a>
</li>
Code
vm.dugme = function (){
vm.addColSm4 = true;
};
Demo Plunker
I need to display a div of comment box section on ng-click of the button invoking the function from controller as defined in the below HTML...picking up the index values from the table and validating the ng-if condition as shown in the code
<button class="btn btn-outlined" ng-click="vm.showCommentBox1($parent.$index, $index)">Save All</button>
<div class="comment-box custom saveAll" ng-if="tableData.template.selectedTowers[towerIndex].baselines[baselineIndex].toBeCommented">
<div class="panel panel-default">
<div class="panel-heading">
<button type="button" class="close" aria-label="Close" ng-click="baseline.toBeSaved = false" title="Close comment box"><span aria-hidden="true">×</span>
</button>
<h3 class="panel-title blue-30">Comment</h3>
</div>
<div class="panel-body">
<form>
<div class="form-group">
<textarea class="form-control bg-white" ng-model="tableData.template.selectedTowers[$parent.$parent.$parent.$parent.$index].baselines[$index].comment"
placeholder="Add your description"></textarea>
</div>
<button ng-click="saveAllRows(tableData.dealName, tower.towerName, baseline, $parent.$parent.$parent.$parent.$index, $index, tower.towerGeo, tableData.template.selectedTowers[$parent.$parent.$parent.$parent.$index].baselines[$index].comment)"
class="btn btn-filled btn-xs pull-right">Submit</button>
</form>
</div>
</div>
</div>
The function with the arguments are going undefined while the same arguments in different function possess some values
vm.showCommentBox1 = function (towerIndex, baselineIndex) {
$scope.tableData.template.selectedTowers[towerIndex].baselines[baselineIndex].toBeCommented = true;
$scope.tableData.template.selectedTowers[towerIndex].baselines[baselineIndex].toBeSaved = true;
$scope.tableData.template.selectedTowers[towerIndex].baselines[baselineIndex].showPreviousComments = false;
}
in the above code towerIndex and baselineIndex are going undefined while the same has some values intended when different functions are invoked
Example:the below function possess the values for both the arguments
vm.enableSaveButton = function (towerIndex, baselineIndex) {
// console.log("Changed", baseline);
$scope.tableData.template.selectedTowers[towerIndex].baselines[baselineIndex].toBeCommented = true;
}
By,this situation im stuck and im not able pass the ng-if condition true in my HTML so that i can display the comment box.
please,help on this
Thank you
As it was a button outside the table i can't pass the parameters as ($parent.$index,$index) from controllers because only table possess the $index values...it was my bad i didn't notice that at beginning.
I am pretty much new to Angular JS. I have some products to display in the home page which I am displaying using ng-repeat. Each product have an 'Add to cart' button which is also displayed using ng-repeat. My problem is, I want to change the text of a particular button I am clicking. I have used 'toggle' and all the buttons text is changing. Please some one help me with this issue.
My HTML Code:
<div class="col-md-3 col-sm-6" ng-repeat="item in products">
<div class="thumbnail">
<image src="{{item.imageUrl}}"></image>
</div>
<div>
<button class="btn btn-primary" ng-click="toggle(item)">{{buttonText}}</button>
</div>
</div>
My angular js code:
var toggle = false;
$scope.toggle = function(item){
$scope.buttonText = toggle ? 'Add To Cart' : 'Remove From Cart';
toggle=!toggle;
}
You need to add a property to the item you are passing in. Then use that property. Changing scope would change all instances.
var toggle = false;
$scope.toggle = function(item){
item.buttonText = toggle ? 'Add To Cart' : 'Remove From Cart';
toggle=!toggle;
}
<div class="col-md-3 col-sm-6" ng-repeat="item in products">
<div class="thumbnail">
<image src="{{item.imageUrl}}"></image>
</div>
<div>
<button class="btn btn-primary" ng-click="toggle(item)">{{item.buttonText}}</button>
</div>
</div>
kind of like above