I would like to create an alert that does not use ng-repeat. I've created a simple function that will fill in the parameters for type and message. I am able to successfully add the message but not able to get the type to change. Can someone explain what I would need to get the type to change from the default to they type I would like?
http://plnkr.co/edit/DfuD8A?p=preview
I am pretty new to javascript and Angular so any help you can give me is very much appreciated.
You're hitting a known bug: https://github.com/angular-ui/bootstrap/issues/2168
At the moment, you can workaround it by redefining the template as described in the bug report, or by regenerating the alert every time the alert is shown using an ng-if directive:
<alert ng-if="alertMsg" ... />
Related
I keep getting emmett autocomplete suggestions even inside the template string used with styled/css/createGloablStyle when using styled-components. Is there a way I can get around to disabling emmett inside the function template string or maybe at least push it down the suggestions? It's not a problem per see but I have been exploring vscode and want to know if there's a setting that helps.
Image attached below for reference. The body tag I want to disable in autocomplete suggestions.
PS: I don't want to disable emmett globally or even in the file, just in the function scope.
I currently have a generic list component and I want to add, depending on where I use it, different callbacks for adding/removing/updating items to that list.
My current implementation looks like this:
<div list-callback1>
<generic-list
add-callback="listCallback1.add()"
update-callback="listCallback1.add(id, name)"
delete-callback="listCallback1.delete(id)"></generic-list>
</div>
My question:
Is there a way to decrease nesting? Because when I add the directive directly to my component I get a compile error.
Ok, it was a different problem.
I had scope: true in my list-callback1 directive.
After removing that, all works fine. Thanks for the help
Sorry I couldn't post more code, but I am restricted by my employer ;)
I am attempting to use $mdToast.updateTextContent() to update a toast and am unsuccessful. The docs don't go into detail on how to call it with a new message. My desire result would have the first toast display 'Adding account' then change to 'account successfully added'. Any help would be greatly appreciated.
I think the correct way to approach this using material design standards would be to only use the toast once the account has been added. The loading could be a spinner or maybe a loading bar (maybe like this http://materializecss.com/preloader.html)
Once the $mdToast is open, you're able to call updateTextContent (as you stated)
$scope.onAccountAdded = function() {
$mdToast.updateTextContent('Account successfully added')
};
We're watching the variable for changes and update the view automatically, once the value has changed.
https://github.com/angular/material/blob/master/src/components/toast/toast.js#L299
Here is a demo, which shows how it works.
http://codepen.io/DevVersion/pen/qNWewJ
For some reason when getData uses angular resource to bring the data it is being called twice, causing the resource to do it REST request twice too <--- bad...
Any idea why and how to solve it?
Here a working testcase/plunker example that recreates this scenario (look at the browser console - "getData being called...." displayed twice ) b.t.w as you can see I'm not really using the resource to bring real data, just to demonstrate the scenario, In my real app I do use the resource to bring real data and its being called twice just like in this example,
Thanks ahead
After looking into the src of the ng-table I noticed the following
$scope.$watch('params.$params', function(params) {
$scope.params.settings().$scope = $scope;
$scope.params.reload();
}, true);
Which means that the tables calls it 'getData' on count/filter/group/groupBy/page/sorting
which explains the behavior I was seeing.
When you call params.count(...) you ask ng-table to refresh data as you change page size. That's why you have two get-data calls.
If you don't want to have paging, then remove calls params.count and params.total.
If you need paging, then set page size and do not change it in getData.
This happened to me with a weird reason. getData get called twice on init (first load) only. changing page or sorting didn't call getData twice. The reason was that at init the ng-table directive was hidden in the template file.
Thank #Alexander Vasilyev. I understood my problem as you said. I want to explain a litte more here. In fact, the object "params" is the object configuration the table ng-table, then if "params" changed (ex: count or a property of the object), ng-table will invoke function getData() to refresh table.
In my case, I want to get information in the object "params" and change it but I dont want to refresh ng-table. I did it by cloning object "params" et work his object copied. Clone the object in JS with jQuery :
var resultParams = jQuery.extend(true, {}, params.$params);
And then, I will work on the object resultParams instead of "params" original.
When my field becomes invalid, is there a way to fire a method in my js?
So for example, the user fails to fill out the name field, clicks submit, I want to:
console.log('they forgot');
Thanks
There is a $error object made available by AngularJS. This object contains all of the validations on a particular form and tells if they are valid or invalid.
To get access to this property, we can use the following syntax:
formName.inputfieldName.$error
Here is a jsfiddle sample
This document is a good reference for understanding form-validations using AngularJS.
Also, for dealing with custom validations, you can add your own directives. A sample of making such directives is given in the link above.