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.
Related
In my project, a user can enter a string, which is then translated in the view to a button.
Here is an example, for what I wish to happen:
User types in: argumentation-link_to(80)
In the view, it should look like this:
<button ng-click="goToArgumentation(80)"
class="btn btn-xs btn-info"> a link
</button>
This is my code right now:
$scope.buttonmaker = function(haystack) {
needle = /argumentation-link_to\(\d+\)/i; // <-- Regex
haystack = $sanitize(haystack);
return $sce.trustAsHtml(haystack.replace(new RegExp(needle, "gi"), function(match) {
console.log(match);
return '<button ng-click="goToArgumentation(' + match[0] + ')" class="btn btn-xs btn-info"> a link </button>'
}));
};
At the moment, argumentation-link_to(80) will produce this:
<button ng-click="goToArgumentation(a)"
class="btn btn-xs btn-info"> a link
</button>
I need to get the number 80 in argumentation-link_to(80) to fill in the argument in goToArgumentation()
Thankfully, Regex gives us the option to retrieve data within the Regex with capturing groups. However, when I try to use them, I get the error, that the regex is not valid. Using this site, I tried:
/argumentation-link_to\((?<id>\d+)\)/i
/argumentation-link_to\((?'id'\d+)\)/i
Here I tried one, where no error occured, but I could not get the value:
/argumentation-link_to\((?:\d+)\)/i
What is the correct way to use capturing groups in angular js? And how would I reference them?
To use capture groups you use () and the the exec() function of RegExp:
$scope.buttonmaker = function(haystack) {
needle = /argumentation-link_to\((\d+)\)/i; // <-- Regex
haystack = $sanitize(haystack);
return $sce.trustAsHtml(haystack.replace(new RegExp(needle, "gi"), function(match) {
console.log(match);
return '<button ng-click="goToArgumentation(' + needle.exec(match)[1] + ')" class="btn btn-xs btn-info"> a link </button>'
}));
};
I need help.
My code is in a login.
When the user click in login: I put a button disable to avoid that the user do click many times when the system is working, waiting for a answer
My code works fine, but I put a loader class when the user click in button login.
When the user put the password and is acepted, the system send us to the next view. This works fine, but...
The problem is:
When the user put a invalid pasword this.loadingActive = true; dont change.. the button remain with the spin active forever. I mean something happend that the variable loadingActive dont change to true
my html
<button class="btn btn-default btn-lg btn-block"
ng-class="{'disabled': login.loadingActive === false}"
ng-disabled="loginForm.$invalid || login.loadingActive === false"
ng-click="login.login()">
<span ng-hide="login.loadingActive" class="fa fa-refresh animacion-cargando"></span>
<span ng-hide="login.loadingActive">loading...</span>
<span ng-show="login.loadingActive">Login</span>
</button>
This is my js file
login() {
this.loadingActive = false;
this.error = '';
Meteor.loginWithPassword(this.credentials.email.toLowerCase(), this.credentials.password,
this.$bindToContext((err) => {
Meteor.setTimeout(() => {
if (err) {
this.loadingActive = true;
this.error = err;
} else {
this.loadingActive = true;
this.$state.go('app.pageOne');
}
}, 1000);
})
);
}
Why when I put a Meteor.setTimeout inside a Meteor.loginWithPassword happen this?
any ideas?
thanks!
I see you wrap the callback inside a this.$bindToContext. Not sure what it does but my guess is that it changes the context (this) the callback function so that this.loadingActive = true has no effect.
To fix this you could use a reference variable:
login() {
const self = this;
// ...
Meteor.loginWithPassword(
self.credentials.email.toLowerCase(),
self.credentials.password,
self.$bindToContext((err) => {
Meteor.setTimeout(() => {
// ...
self.loadingActive = true;
}, 1000);
}
));
}
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>
I have been facing different diff kind of element not visible issues in my application. kindly help me for solution on this.
below or the html code
For Drop Down
<span class="btn btn-default form-control ui-select-toggle" style="outline: 0;" ng-click="$select.activate()" ng-disabled="$select.disabled" aria-label="Select box activate" tabindex="-1">
To Type text in the Auto Complete Drop down.
<span class="ui-select-placeholder text-muted ng-binding" ng-show="$select.isEmpty()">Select Reseller...</span>
I was able to click on the drop down and enter the text. but after that it fails with element not visible error
If u can click on the Auto complete drop down then try to select the drop down by text value.
by.linkText('Text to be selected'));
or
try using the below function (this will select the value by text)
this.SelectRowByCellValue = function (Elem, Texts)
{
Elem.filter(function (element) {
return element.getText().then(function (text) {
if (text == Texts && text != null)
{
element.click();
return false;
}
else
{
}
});
}).then(function (filteredElements) {
});
};
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;