Hi I have annoying problem. I am trying to add two methods to $scope. And I am doing this right this:
function typeCtrl ($scope, $timeout) {
$scope.addType = function(){
requestHelper.addType();
};
$scope.removeType = function(number){
alert("asdasdsad");
requestHelper.removeType(number);
};
};
And I am trying to call it this way:
<button id="addType" class="btn btn-primary glyphicon glyphicon-plus" ng-click="addType()"></button>
<button id="removeRequest" class="btn btn-danger glyphicon glyphicon-minus" ng-click="removeType(1)"></button>
A method addType() works correctly but angular not see removeType() method. Can you tell me whay I am doing wrong. Thanks for replies.
Can it be because of no end-bracket on first button?
Related
I have a button that leads to a modal view. I try to intercept the value with JS.
It works like this:
<button type="button" class="btn btn-outline-primary btn-sm"
data-toggle="modal" data-target="#myModal" data-person-id="something">
Edit
</button>
JaveScript:
var bookId = $(e.relatedTarget).data('person-id');
It doesn't work like this:
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
data-target="#myModal" data-th-id="${person.getId()}">
Edit
</button>
JS:
var bookId = $(e.relatedTarget).data('id');
or
var bookId = $(e.relatedTarget).data('th-id');
var is undefined it says.
Since I use Thymeleaf I need to catch the value with data-th-id.
Any idea how to get the value
Complete JS
$('#myModal').on('shown.bs.modal', function (e) {
$('#myInput').focus();
var bookId = $(e.relatedTarget).data('id');
alert(e.relatedTarget.nodeName);
alert(bookId);
});
data-person-id="something" is a data attribute, and is accessed with $('...').data('person-id').
data-th-id="${person.getId()}" isn't a data attribute. It's just a different way of saying th:id, which outputs the id="..." attribute of a tag. You can't use jQuery's .data() method on non-data attributes, instead you use attr() -- $(e.relatedTarget).attr('id');
Am developing an application in angular js and using ui.router.
I would like to hide certain buttons based on a given state.
I have implementend the click event which navigates to the selected state, and i would like when a button has been clicked and is active to be hidden and reappear when the state is not active
I have tried
HTML FOR THE BUTTONS
<button type="button" ng-click="viewNew()" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> New calls
</button>
<button type="checkbox" ng-click="viewAssigned()" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> Assigned calls
</button>
On the controller
$scope.viewAssigned = function () {
$state.go("dash.call.assigned");
}
$scope.viewNew = function () {
$state.go("dash.call.new");
}
How can i alter my controller code to hide and show these buttons using ng-show
You'll need to add information about the state to the controller, through something like $scope.state = $state.current.name
From there, you can use that in an ng-show or ng-if.
You can do this,
<button type="checkbox" ng-click="viewAssigned()" ng-hide="$state.includes('dash.call.assigned')" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus"></i> Assigned calls
</button>
you should have added $state in $rootScope, for this to work.
Inject $state, $rootScope and place this in your app's run block.
$rootScope.$state = $state;
You can use a $scope variable to track the state change.look at the below code
$scope.viewAssigned = function () {
$scope.viewnew = true;
$state.go("dash.call.assigned");
}
$scope.viewNew = function () {
$scope.viewnew = false;
$state.go("dash.call.new");
}
And your HTML code should be like this,
<button type="button" ng-click="viewNew()" class="btn btn-sm btn-success" ng-hide="viewnew">
<i class="glyphicon glyphicon-plus">
</i> New calls
</button>
<button type="checkbox" ng-click="viewAssigned()" class="btn btn-sm btn-success" ng-hide="!viewnew">
<i class="glyphicon glyphicon-plus">
</i> Assigned calls
</button>
You can see when the $state is changing and hide that buttons. On your run() you can use a function similar to this:
myApp.run(function ($rootScope, $state) {
$rootScope.viewnew= false;
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
if (toState.name === 'myState') {//toState variable see the state you're going
$rootScope.viewnew = false;
} else {
$rootScope.viewnew = true;
}
});
});
then add this to your buttons:
<button type="button" ng-click="viewNew()" ng-hide="viewnew" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> New calls
</button>
<button type="checkbox" ng-click="viewAssigned()" ng-hide="!viewnew" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> Assigned calls
</button>
so when your $state change it would hide or show it.
I have a button:
<button ng-click="deleteCompany(company.id)"
class="btn btn-danger"
onClick="return window.confirm('This will permernently delete the entity\n
Are you sure you want to delete this post?'); ">
<span class="glyphicon glyphicon-trash"></span>
</button>
I also have an angular function:
$scope.deleteCompany = function(id){
console.log(id);
}
When i click cancel in the confirm the console outputs:
1
When i click ok in the confirm the console outputs:
1
I want the angular code to execute when the "Ok" is pressed but not when the "Cancel" is pressed.
JSFiddle example: http://jsfiddle.net/4304ewu5/
Throw your confirm inside the $scope.deleteCompany() function:
function MyCtrl($scope) {
$scope.deleteCompany = function(id) {
if (confirm('This will permernently delete the entity\nAre you sure you want to delete this post?')) {
$scope.name = id;
// delete the stuff.
}
}
}
And remove it from the inline HTML:
<div ng-controller="MyCtrl">
<button ng-click="deleteCompany('1')" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
<button ng-click="deleteCompany('2')" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
Hello, {{name}}!
</div>
Fiddle: http://jsfiddle.net/0Laztrfk/
Why don't you put the confirm within your deleteCompany method?
$scope.deleteCompany = function(id) {
if (!confirm("Delete company?"))
return;
console.log(id);
}
I am trying to create a button group of two (using bootstrap and angularjs) that, when clicking on them, each would redirect to a different URL. I currently have the following code (copied only the relevant pieces):
app.controller('LinkController',function(link, $scope, $location){
$scope.go = function(){
$location.url(link);
};
});
<div class="btn-group btn-group-lg" data-ng-controller = "LinkController">
<button type="button" class="btn btn-primary" data-ng-click = "go('test1.html')">Click1</button>
<button type="button" class="btn btn-primary" data-ng-click = "go('test2.html')">Click2</button>
</div>
However, this doesn't work, and I am not sure why. I might not be passing the arguments correctly, but I tried it even without passing the link itself and it still didn't work. Would appreciate any help!
Are you trying to pass the url ?,
if so, then i would be like this :
app.controller('LinkController',function(link, $scope, $location){
$scope.go = function(link){
$location.url(link);
};
});
<div class="btn-group btn-group-lg" data-ng-controller = "LinkController">
<button type="button" class="btn btn-primary" data-ng-click = "go('test1.html')">Click1</button>
<button type="button" class="btn btn-primary" data-ng-click = "go('test2.html')">Click2</button>
</div>
Ok so after many many attempts, and with some inspiration from the answers above, I was able to solve it in the following way:
app.controller('LinkController',function($scope){
$scope.go = function(link){
window.location = link;
};
});
<div class="btn-group btn-group-lg" data-ng-controller = "LinkController">
<button id = Image type="button" class="btn btn-primary"
data-ng-click = "go('Test1.html')">Click1</button>
<button id = Text type="button" class="btn btn-primary"
data-ng-click = "go('Test2.html')">Click2</button>
</div>
Thanks for your help guys.
I don't know much of Angular js, but there are other alternative ways to achieve the same purpose. This works with simple html
<div class="btn-group btn-group-lg">
<input type="button" class="btn btn-primary">Click1</input>
<input type="button" class="btn btn-primary">Click2</input>
</div>
Notice I changed the button element to input, this because a button element can not be placed inside an anchor tag <a>.
I hope this helps
I have a javascript knockout button that i would like to disable for 3 second after the first click.
<button type="button" class="btn btn-default btn-xs" data-bind="click: editFile">
Edit
</button>
I have tried
<button type="button" class="btn btn-default btn-xs" data-bind="click: editFile, disable:disableButton">
Edit
</button>
Then on JavaScript I did this. That disables the button completely.
disableButton = ko.observable("true");
I also tried pure JavaScript but that didn't work at all:
$(function() {
$(".btn-default").click(function() {
$(".btn-default").attr("disabled", "disabled");
setTimeout(function() {
$(".btn-default").removeAttr("disabled");
}, 3000);
});
});
I tried following the example that was given by knockout but I don't think I'm doing it properly:
Knockout example
Can someone please help I'm new to knockout and JavaScript?
Refer below code snippet -
function AppViewModel() {
var _self = this;
_self.disableButton = ko.observable(false);
_self.editFile = function(){
_self.disableButton(true);
setTimeout(function() {
_self.disableButton(false);
}, 3000);
};
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<button type="button" class="btn btn-default btn-xs" data-bind="click: editFile, disable:disableButton">
Edit
</button>
You just need to update the observable true or false to enable/disable the Edit button.
Hope this helps!