I have multi page form that has a back button built in. I want to change state when chapterID reaches 0.
$state.go executes but then redirects back to gn.newChapter state
HTML:
<a ui-sref="gn.newChapter({chapterID: id})" class="btn btn-primary" ng-click="goBack()">Go Back</a>
Controller:
$scope.goBack = function() {
if (newChapterService.getChapterState() === 0) {
$state.go('gn.createGNForm');
}
else {
$scope.id = newChapterService.goBackChapter();
}
};
<a class="btn btn-primary" ng-click="goBack()">Go Back</a>
$scope.goBack = function() {
if (newChapterService.getChapterState() === 0) {
$state.go('gn.createGNForm');
}
else {
$scope.id = newChapterService.goBackChapter();
$state.go('gn.newChapter({chapterID: $scope.id})'); // I don't know your predefined paths. so just suggesting this as an answer. This line might be different according to your need.
}
};
Related
I have a situation where I want to disable the button for a few seconds when clicked. Here is the code for button:
<button uib-popover="Create TO" popover-trigger="mouseenter" data-ng-click="createTransportOrder(item.confirmed_price_id)" data-ng-disabled="item.transport_order_id || !item.confirmed_price_id" class="btn btn-info btn-xs">
<i class="fa fa-truck"></i>
</button>
And here is the createTransportOrder method:
$scope.createTransportOrder = function (priceResponseId) {
var priceResponseIds = [priceResponseId];
PriceRequestsModel.createTransportOrdersByIds(priceResponseIds).then(
function (response) {
$scope.messages = response.messages;
updateSelectedPriceRequests();
getPriceRequests();
},
function (response) {
$scope.messages = response.messages;
}
)
};
I have tried a couple of things but in vain. How can I do this?
You can add setTimeout at the end of createTransportOrder
this.button.nativeElement.disabled = true;
setTimeout(function(){
this.button.nativeElement.disabled = false;
},5000);
Add #mybutton to your button <button (click)="yourclick()" #mybutton>Your button</button>
add variable #ViewChild('mybutton') button; to your component
Stackbliz demo code: https://stackblitz.com/edit/angular-disable-5second
With angular 1.4 you can change to
Set an id to your button as <button id="mybutton">
Add these code to below of click function.
document.getElementById('mybutton').disabled = true;
setTimeout(function(){
document.getElementById('mybutton').disabled = false;
},5000);
I am trying to change the name of the button from Hold Payment to Unhold Payment, it should first check the status of the checkstatus.is_holdpayment and then execute the function userhold_payment(). I tried various things, ng-show, ng-if but the name of the button does not change on click. On click it should go, Hold, Unhold, Hold, Unhold and also execute the same function, userhold_payment(). I want to change the name of the button using AngularJS. What is the mistake. Here is the main.html
<div ng-init="check_status()">
<button type="button" ng-if="checkstatus.is_hold_payment" ng-click="userhold_payment();" class="btn-success btn-lg hold_payment_html" style="margin-top:7px; font-size:16px">Hold</button>
<button type="button" ng-if="!checkstatus.is_hold_payment" ng-click="userhold_payment();" class="btn-success btn-lg hold_payment_html" style="margin-top:7px; font-size:16px">UnHold</button>
</div>
Here is the Controller for the function.
$scope.userhold_payment = function() {
$http.get('http://localhost/ngaffiliate/api/payment/change_hold_payment_status')
.then(function(response) {
console.log('I called');
$scope.userhold = response.data;
console.log($scope.userhold.is_hold_payment);
});
};
//this will call when ever your controller reinstance
($scope.check_status = function() {
$http.get('http://localhost/ngaffiliate/api/payment/check_payment_status')
.then(function(response) {
console.log('I called now')
$scope.checkstatus = response.data;
// console.log(response);
console.log($scope.checkstatus.is_hold_payment);
if($scope.checkstatus.is_hold_payment=="0")
$scope.checkstatus.is_hold_payment = true;
else($scope.checkstatus.is_hold_payment=="1")
$scope.checkstatus.is_hold_payment = false;
$scope.checkstatus.is_hold_payment =!$scope.checkstatus.is_hold_payment;
console.log($scope.checkstatus.is_hold_payment);
});
})();
As I already mentioned in my comment, you should probably call $scope.check_status() in your $scope.userhold_payment() function, since the function doesn't normally change the value of the $scope.checkstatus.is_hold_payment variable. I also removed the line where you reversed the variable's value.
Plunker here to demonstrate: https://plnkr.co/edit/SWpdHGaNWIkyIWSvHyUU?p=preview
Try using this:
<button type="button" ng-click="userhold_payment();" class="btn-success btn-lg hold_payment_html" style="margin-top:7px; font-size:16px">{{checkstatus.is_hold_payment ?? "Hold": "Unhold"}}</button>
I am creating some divs using ng-repeat.
See code below :
.controller('meditationsController', function ($scope, $state, $rootScope, $http) {
var req = {
method: 'POST',
url: 'http://example.com/demo/',
headers: {
'Content-Type': 'application/json'
}
}
// Call API
$http(req).then(function(result) {
var rawData = result.data;
$scope.meditationByCategory = {};
for (var i = 0; i < rawData.length; i++) {
var meditation = rawData[i];
if ($scope.meditationByCategory[meditation.main_title] == undefined) {
$scope.meditationByCategory[meditation.main_title] = {};
$scope.meditationByCategory[meditation.main_title].name = meditation.main_title;
$scope.meditationByCategory[meditation.main_title].meditations = [];
}
$scope.meditationByCategory[meditation.main_title].meditations.push(meditation);
}
});
})
<div ng-repeat="(categoryName, category) in meditationByCategory">
<div class="peacefulness"><p class="para-text">{{category.name}}</p></div>
<a href="" ng-click="goToDetailPage()" class="customlink">
<div class="item-content" ng-repeat="meditation in category.meditations">
<span class="leftSpanStyle">{{meditation.title}}</span>
<span class="rightSpanStyle">
<i class="icon ion-ios-information-outline icon-size"></i>
</span>
</div>
</a>
</div>
I have successfully created the list of divs dynamically according to service response.
Now i want to apply click to each div. and the data that i am getting in service response want to bind the next page. I mean the data on the next page will be dynamic and depend upon cliked div.
please help me to bind the data into another page..
Add a button to your view. Something like:
<span class="rightSpanStyle">
<i class="icon ion-ios-information-outline icon-size"></i>
</span>
<button ng-click="doSomeThing($index)"></button>
And in your controller:
$scope.doSomeThing = function(index){
//do something with category.meditations[index]
//or go to another state: $state.go("myState", {item: category.meditations[index]})
}
Edit:
As you say "want to bind to next page" I assume that you want to navigate to another page. Assuming also that you do so by using angulars ui-router, that means that you want to change state. In that case don't forget to define:
url: /myUrl/:item
for that state in question. You can access the item in the target state / controller with $stateParams.item
Using the pre-built "Angular Timer" directives available here (scroll down to progress bar example), I'm trying to build a progress bar with a Start, Stop and Resume button all-in-one.
Examples on their websites are made of two buttons and I would like to merge them.
One solution could be to use innerHTML to get the current state ("Start" or "Stop") and a if condition in the controller.js but i'd like the button to be a icon-only-button switching from play to pause icon.
An example from simple timer implementation is available here
Here is my html
<button class="button button-icon icon" ng-class="{'icon ion-play': !play, 'icon ion-pause': play}" ng-click="stopResumeTimer(this)"></button>
<timer interval="1000" autostart="false"><div class="progress"> <div class="bar" style="width: {{seconds}}%;"></div> </div></timer>
And the controller.js code with the if condition
$scope.stopResumeTimer = function(btn) {
if (not yet started) {
$scope.startTimer();
}
else if (already started) {
$scope.stopTimer();
}
else {
$scope.resumeTimer();
}
}
I am discouraged by the repeated failure on this, any help would be great! Thanks
In the controller where you are setting the ng-click function, you can set flags to determine whether the click function should start, stop, or resume. Those flags can also set the text for the button to be either "Start", "Stop", or "Resume".
JS:
(function(angular) {
function controller($scope) {
var isStart = false;
var isStop = false;
$scope.timerBtnText = "Start";
$scope.timer = function() {
if (isStart) {
$scope.startTimer();
isStart = false;
isStop = true;
$scope.timerBtnText = "Stop";
return;
}
if (isStop) {
$scope.stopTimer();
isStop = false;
$scope.timerBtnText = "Resume";
} else {
$scope.resumeTimer();
isStop = true;
$scope.timerBtnText = "Stop";
}
};
}
angular.module("app", []).controller("controller", ["$scope", controller]);
})(angular);
HTML:
<button ng-click="timer()" ng-bind="timerText"></butotn>
Here is a working proof of concept: http://plnkr.co/edit/NlQFPysVH1M2EyjogQQv
This is how I would solve it (Plunker)
Controller:
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.operation = 'start';
$scope.startOrStop = function(){
document.getElementById('first')[$scope.operation]();
$scope.operation = ($scope.operation === 'start' || $scope.operation === 'resume') ? 'stop' : 'resume';
}
});
Declare it like this:
<button ng-click="startOrStop()" ng-class="{start:operation==='start', stop:operation==='stop', resume:operation==='resume'}"></button>
<timer id="first" interval="1000" autostart="false"><div class="progress"><div class="progress-bar" role="progressbar" style="width: {{seconds}}%;"></div></div></timer>
Css:
.start::before{
content:"Start";
}
.stop::before{
content:"Stop";
}
.resume::before{
content:"Resume";
}
I have a resource that returns a JSONP payload:
app.factory('JsonService', function($resource) {
return $resource('//123.456.7.890\\:8888/user/:id/:model',
{'page': ':page', 'limit' : ':limit', 'jsonp_callback' : 'JSON_CALLBACK'},
{})
});
Which gets called by my controller:
app.controller("followersCtrl", function ($scope, $dialog, JsonService) {
...
$scope.user_id = $.globals.authed_user_id;
$scope.model = "followers"
$scope.loadJSONP = function (getPage) {
JsonService.get({
id: $scope.user_id,
page: getPage,
limit: $scope.pagination_limit,
model: $scope.model
},
function (data) {
$scope.followers = data;
$scope.noOfPages = data.page_count;
$scope.currentPage = data.page;
});
};
$scope.loadJSONP(1);
$scope.pageChanged = function (page) {
$scope.callbackPage = page;
$scope.loadJSONP(page);
};
});
Then I loop over the data returned/stored in $scope.followers:
<div ng-controller="followersCtrl">
...
// Code related to the modal omitted
...
<div ng-repeat="user in followers.data">
<img class="img img-polaroid" ng-src="{{user.image_url}}"/>
<p>{{ user.username }}</p>
<button class="btn btn-disabled" ng-show="user.is_mutual">
You Are following this user
</button>
<button class="btn btn-primary" ng-show="!user.is_mutual">
You Aren\'t following
</button>
<p>{{user.total_followers}}</p>
</div>
...
// Code related to the modal omitted
...
</div>
That all works as expected, but for the life of me I cannot figure out how to have the "You are not following" button change the value that's reflected inside the corresponding {{post.total_followers}} expression on click. Ideally, I would like to perform a PUT to actually perform the follow action, but I decided to start small and just update the value, to no avail.
Any help is appreciated. Thank you.
Is ng-click what you're looking for?
HTML:
<button class="btn btn-primary" ng-show="!user.is_mutual" ng-click="follow(user)">
You Aren\'t following
</button>
JS:
app.controller("followersCtrl",
function ($scope, $dialog, JsonService) {
$scope.follow = function(user){
// code for posting to server-side follow action
// and updating the total_followers
// $scope.user.total_followers++; // this should be ideally incremented on success callback
}
}
);