I have a simple Angular Script which works like ajax to return search results, but when I don't type anything into the search box, it lists all of the data in the data base, how do I stop this?
My script is here: http://www.elliottcoe.com/search/search.js
instead of just validating with null check for empty string
if($scope.keywords==null || $scope.keywords.trim()==""){
$scope.trustedExample = $sce.trustAsHtml("<p>Please enter some text in search field</p>");
}
You can use a built in filter limitTo: <Any Limitation Number>
limitTo docs
Related
I have a list of form fields that are generated as the result of an ng-repeat . As such I use the {{$index}} of the repeat loop to name the fields, i.e. ` which leads to:
<input name="myInput0">
<input name="myInput1">
<input name="myInput2">
...
etc. Now I'm trying to access the fields' $valid attribute from the form in the standard angularjs way i.e. myForm.myInput{{$index}}.$valid which resolves to e.g. myForm.myInput0.$valid which I understand won't work because it's accessing a variable and numbers won't be allowed.
However I then tried to access it with myForm['myInput{{$index}}'].$valid, e.g. myForm['myInput0'].$valid which I thought might work but still doesn't. Is there any way possible to access the form field when it contains a numeral? (or other illegal char like a hyphen)?
e: I'm using angularjs 1.2 which might explain why this isn't working. Does anyone know of a workaround for pre 1.3 angular?
The correct expression will look like myForm['myInput' + $index].$valid
I can think of two ways of workaround.
First option:
Put a ng-change on each input and validates it there manually.
Second option:
Retrieve all input elements, interate over each and validates manually
You can get them with this
var inputs = $document[0].querySelectorAll('#rankingForm input');
I want to get this format In USD : 1.123.362,32 and this format in euro :1,122,363.33
I used AngularJS Filter "currency" who Format a number to a currency format but without separtors like "," "."
Use a Filter
here is a link to the docs where you can see an example.
You need to use the currency filter to get the desired effect. It should look like this
HTML
{{ currency_expression | currency : symbol : fractionSize}}
JS
$filter('currency')(amount, symbol, fractionSize)
To do this with the correct , or . you need to have the correct currency format selected.
Math.round()
inside your controller when you are setting the scope make sure you do Math.round() so the number you return is always whole.
Example
Math.round(2.5);
Alternatively
If the currency filter does not meet your requirements you can always use the number format that Angular provides, Doc are here
HTML
{{ number_expression | number : fractionSize}}
JS
$filter('number')(number, fractionSize)
If All Else Fails
Create your own custom filter here is a tutorial on how to build your own custom filter in angular, since your requirements are a little strange you should consider building your own filter to match them. This way you can set your , or . and anything that precedes or follows your number.
Its definitely more difficult than using the built in functionality but since you cant get it to match up with either of the methods above I would take this route.
currency angularjs's filter does not deal comma in usd and point in euro.... I used kendo ui like the filter in grid,it deal all event :
kendo.toString(236, 'c', fr-FR);
hope we find a complete solution with angularjs.
How can I implement typeahead like functionality (autosuggestion), keeping the nice "material design" in AngularJS (https://material.angularjs.org)
You cans Autocomplete field.
The documentation is at
https://material.angularjs.org/latest/demo/autocomplete
This is possible using Autocomplete in Angular Material; however it is not immediately obvious from the documentation.
The demo only matches characters at the beginning of the result due to specifying the caret flag, ie: md-highlight-flags="^i"
To allow autocomplete to find any matching characters you should use the global flag, ie: md-highlight-flags="gi"
You will also need to change the state.value.indexOf(lowercaseQuery) === 0 line in the filterFn function to state.value.indexOf(lowercaseQuery) !== -1
Check this codepen for a working example:
http://codepen.io/DevVersion/pen/KrOYoG
Is Angularjs takes care of XSS attack. I have read that ng-bind takes care. But When i try to do a sample to test that, it allows me to insert html tags in input type with ng-model...it didn't escape the Html tags.
I have lot of input element in our page, which binds with ng-model, what should I do to make sure if I input a html tags ,angular ignores the html/scrip tags.
ex.
<input id="name" ng-model="name"></input>
if I input as
'Hello, <b>World</b>!'
$scope.name contains the same what I entered ,didn't exclude the tags. i.e
var val = $scope.name;
console.log(val);
prints as same
'Hello, <b>World</b>!'
Please let me know how to solve this in angularjs.
thank
Look at here : http://docs.angularjs.org/api/ngSanitize/service/$sanitize
If you want escape use ng-bind, it ll render the tag without interpretation like that :
Hello <b>World</b> not like Hello World !
Do you understand ? so ng-bind is safe because it doesn't care about HTML tags.
If you want that your HTML tags be interpreted but safely just use ng-bind-html !
For example if you want to display this string :
'Hello <b>World</b><input type="text" />'
The result will be : Hello World but without the input because AngularJS compiler uses $sanitize service and check a whitelist of HTML elements and an iput is not authorized.
Maybe ng-bind-html is what you're looking for.
If you just want be sure that the user can't put html tags in your input just use the directive ng-pattern on your inputs !
http://docs.angularjs.org/api/ng/directive/input
It takes a regex for allowed characters in your input !
Hope it helps !
I don't believe that AngularJS has default whitelist input validation, which is what your test exercises. So a user can pretty much input anything they like. This is not surprising - whitelists are very domain specific, and Angular is a framework designed for a wide range of domains.
The main defense against XSS is to properly encode all untrusted data (see https://www.owasp.org/index.php/Top_10_2013-A3-Cross-Site_Scripting_(XSS)). This, Angular does by default.
Bottom line is that AngularJS is intended to be secure from XSS by default, no special action required. You can verify some basic scenarios by trying to output what you input into a view using the normal {{scopevariable}} notation.
I did find a detailed analysis of AngularJS XSS vulnerability: https://code.google.com/p/mustache-security/wiki/AngularJS. At the end of the comments, there is a link to a google doc with further discussion and response from the angular team.
So I have an array that I'm using ng-repeat to render out but I want to reverse this list. Previously I have used a filter which i got from this answer: angular ng-repeat in reverse
But now I get an error: "TypeError: Object # has no method 'slice'
at Scope." I'm not sure if this is because of a new version of AngularJS or I'm missing something.
This is my filter code:
.filter('reverse', function () {
return function(items) {
return items.slice().reverse();
};
This is the code from my view from inside the div:
data-ng-repeat='feed in feeds | reverse'
To make the array render in reverse and ordered by 'id', this should work:
data-ng-repeat="feed in feeds | orderBy:'id':true"
Let me know if that works for you.
For your reference: http://jsfiddle.net/byizzy/pgPVU/3/
This is a bit tricky, but for all the people interested in reversing an array without creating new predicate functions and/or modifying the array etc...
ng-repeat="feed in feeds | orderBy:'':true"
or
ng-repeat="feed in feeds | orderBy:'-'"
EXPLANATION
if you leave the second parameter a blank string, then Angular will sort by the default order of the array (index), adding true at the end will enable the reverse parameter of Angular' orderBy
Please use directly Java-script slice function with reverse like this:
data-ng-repeat="item in items.slice().reverse()"
What is the structure of a single feed? It seems you can use the built-in filter from angular to order it the way you want. For example, if the field "id" is what provides "order" in the array, you would do this:
data-ng-repeat='feed in feeds | orderBy:id'
If you want that reversed, you just do:
data-ng-repeat='feed in feeds | orderBy:id:reverse'
Does that make sense? Not sure you need your own filter. If that is the case, perhaps try debugging (i.e. write to the console or otherwise) to see what you are actually being passed. If it is not an array, that's your problem, otherwise try this instead:
return Array.prototype.slice.call(items).reverse();
Let me know if either of those work for you!
Hope this will solve your problem
data-ng-repeat='feed in feeds.reverse()'
a solution which doesn't sort the array, but only copies and reverses it:
ng-repeat="item in items | orderBy : '[]': true"
Another Alternative Way to Achieve the AngularJs Reverse is
<div ng-repeat="item in items | orderBy:'$index':true">
<code>{{item.id}} - {{item.name}}</code>
</div>