I have 3 blocks that are showed based on a boolean.
<button ng-if="user.friendship == null" ng-click="requestFriendship(user.user.id)" class="button button-outline button-calm">
Invite as friend
</button>
<button ng-if="user.friendship == false" ng-click="removeFriendship(user.user.id)" class="button button-calm">
Friend request sent
</button>
<button ng-if="user.friendship == true" ng-click="removeFriendship(user.user.id)" class="button button-calm">
Unfriend
</button>
Well at first i don't know if it is the best solution to structure it that way, so do not hesitate to correct me here if i'm wrong.
then i have my function :
$scope.requestFriendship = function(id) {
$http.post(domain+'/api/friendship/request/'+id+'?access_token='+access_token.key).then(function(response){
// If success change button
}, function(error) {
console.log(error);
});
}
$scope.requestFriendship = function(id) {
// function
}
So based on the result (my api is returning success or failed, so if success), I need to Hide the previous button and change it to its new state.
So how can i hide and show buttons based on the answer of the API.
You would set $scope.user.friendship to the correct value to show and hide the relevant button:
This will show the unfriend button:
$scope.user.friendship = true;
This will show the Friend request sent button:
$scope.user.friendship = false;
Related
I am implementing an input button, which is visible only if function returns "True" from the back-end.
//Angular Method which returns either true or false, Which is working fine
//Show/Hide Printer
$scope.showHideFunc = function () {
if ($scope.Foo.id != null && $scope.Foo.id != '') {
$http.get(getTFfromDBURL + '/' + $scope.Foo.id).success(function
(data) {
$scope.showHide = data;
});
}
};
//Here is the code for button
<button id="btn-add-device" class="btn btn-info" ng-show="showHide" ng-click="showManagePrinter();loadDrawersForPrinter()">
<span class="glyphicon glyphicon-plus"></span> {{showHide}}
</button>
After all its weird at {{showHide}}, where its getting correct values, while its not affecting ng-show="showHide".
Appreciate thoughts.
Thank you.
I've some fields, they can be edited. The user can cancel the edition mode with the button 'Cancel':
<button ng-click="cancelEdit();" ng-show="editable">
<i class="fa fa-remove"></i> Cancel
</button>
The event ng-click call the function cancelEdit().
$scope.cancelEdit = function(){
$scope.editable=false;
$scope.jobNameInput = $scope.jobToView.name;
$scope.selectedPriority = $scope.jobToView.priority;
$scope.jobCommentsInput = $scope.jobToView.comments;
}
In this function, I just want to set the boolean variable for edition mode to false and reinit the values of my inputs to the default value (before edition mode). After this function is calling, the values are updated for the controller, but not in my view:
<button ng-click="editable=true;" ng-show="!editable">
<i class="fa fa-edit"></i> Edit
</button>
This button is shown when the variable editable is set to false. So when I click on the cancel button, theoretically, the button Edit must be shown and my inputs should be updated. Why is this not the case ?
Primitives are immutable – i.e. its value cannot be changed by invoking functions on it.
Your $scope.editable is a boolean variable which is primitive. That's why the view does not get updated. Its value gets changed only in the closure of your function.
To apply it in your view you should change it to a non primitive value. This could be done if you set it as a property of an object.
E.g.
$scope.isEditable = {
value:false
}
Then play around with that object. In your case:
Cancel button:
<button ng-click="cancelEdit();" ng-show="isEditable.value">
<i class="fa fa-remove"></i> Cancel
</button>
Edit button:
<button ng-click="isEditable.value=true;" ng-show="!isEditable.value">
<i class="fa fa-edit"></i> Edit
</button>
Function:
$scope.cancelEdit = function(){
$scope.isEditable.value = false;
$scope.jobNameInput = $scope.jobToView.name;
$scope.selectedPriority = $scope.jobToView.priority;
$scope.jobCommentsInput = $scope.jobToView.comments;
}
Thanks to Korte for the answer on the boolean variable.
To complete, with regard to the inputs, I found the answer to my question. Simply declare in the controller:var vm = this;;
And simply, in the model of the input, write: ng-model="vm.jobCommentsInput"
I think so the inputs are considered as my boolean variable and they needs to be objects.
I use AngularJSs editable-text to make things changeable. My question now would be it there is a possibility to disable the confirmation while data-e-ng-change is false?
<span editable-text="vm.foundedUser.username" data-e-ng-change="vm.checkUsername($data)" onbeforesave="vm.checkUsername($data)" onaftersave="vm.updateUser()">
{{vm.foundedUser.username || '--'}}
</span>
My checkUsername function looks like this:
function checkUsername(username) {
if(username.length < 5) {
return false;
}
validateService.checkUniqueUsername(username).success(function(response) {
return response.data;
}).error(function(e){
console.log('error in management.controller.js#checkUsername');
});
}
but it does not work, I guess because validateService.checkUniqueUsername is asynchron but I still dont know.
Try this:
<button type="submit" ng-disabled="vm.checkUsername($data)"> Submit </button>
So I'm new to angular JS and I am having a problem with editing one object in an array. The liked function below is bring called and the appropriate object is also being passed to it. The loop is even finding the right object and setting its liked value to true. However for some reason when I click the liked button for the second time it still shows the liked value as being false...I'm sure its something super simple.
<div class="thelist" data-ng-repeat="b in data| orderBy:choice">
<h2>{{ b.from }}</h2>
<p>{{b.date}}</p>
<img class="full-image" src="{{b.img}}">
<p>{{b.content}}</p>
<p>{{b.likes}}</p>
<button class="tab-item" ng-click="liked({{b}})"></button>
</div>
App.js:
ref.on("child_added", function (snapshot) {
var newPost = snapshot.val();
$scope.data.push({
content: newPost.content,
date: newPost.date,
from: newPost.from,
img: newPost.img,
likes: newPost.likes,
realdate: newPost.realdate,
id: snapshot.key(),
liked: false
});
});
The liked function:
$scope.liked = function (post) {
if (post.liked == false){
console.log("liked has been run");
angular.forEach($scope.data, function (object) {
if (object.id == post.id) {
object.liked = true;
}
});
//add 1 like on server here
}
}
You must not use templating in ng-click. Change
<button class="tab-item" ng-click="liked({{b}})"></button>
to
<button class="tab-item" ng-click="liked(b)"></button>
To expand on #hege_hegedus's answer, "ng-click" directive takes an expression (javascript expression with access to $scope variables). Since the since it takes an expression and have complete access to $scope, you can think of
<button class="tab-item" ng-click="liked(b)"></button>
as
<button class="tab-item" ng-click="$scope.liked($scope.b)"></button>
I have this button :
html:
<button nav-direction="back" class="button yy" ui-sref="app.result" ui-sref-active="currentNav" ng-click="navResult()">
Board
</button>
I would like it to display a popup if a certain condition is, else I would like it to go to another page.
I need to keep the benefit of the class in ui-sref-active to show that this is the current page.
controller.js
$scope.navResult = function (){
console.log(sessionService.get('computed'));
if (sessionService.get('computed')) {
$scope.go('app.result');
} else {
//popup to user to tap on a board
//$scope.go('app.compute');
var popupConfig = {
title: 'Beware! ;)',
template: 'Tap on a board below'
};
var popup = $ionicPopup.show(popupConfig);
ClosePopupService.register(popup);
}
}
$scope.go = function ( state ) {
// console.log("go has been launched with : "+ state)
$state.go( state );
};
Simple. You just use an ng-click method instead of a ui-sref, and go to the state from there.
<button nav-direction="back" ng-class="{'your-class':classCondition}" class="button yy" ng-click="navResult()">
Board
</button>
Then in your controller....
$scope.navResult = function(){
if(something){
$scope.classCondition = false;
//code to display popup here
} else {
$state.go('app.result')
}
}
You can pass any valid state into $state.go, so if you ever want to check for a condition and perform some logic BEFORE you redirect to another page, use it inside a $scope method instead of just using the straight ui-sref.