What we want to achieve:
- styling file input
- get the name(s) of files, since we aren’t depending on the original input to tell us what our user has uploaded
- bonus: read and display the text content of file
Category Archives: AngularJS
Angular Snippet: matchCaseFilter
<div ng-repeat="item in arr | objFilter:'name':keyword:matchCase"></div>
arr = [
{name: 'A'}
{name: 'B'}
]
app.filter 'objFilter', ->
return (input, prop, value, matchCase) ->
arr = []
input.forEach (item) ->
if item[prop]
reg = new RegExp(value, if matchCase then '' else 'i')
arr.push(item) if item[prop].match(reg)
return arr
Angular Bootstrap: Why Multiple Radio Buttons Showed Up As Active
<label ng-model="pref.active" btn-radio="'choceA'"> <input type="radio" name="groupName"> </label>
The btn-radio part is a STRING–It needs a valid string.
Angular: Dependency Injection with Providers
Error message:
Uncaught Error: [$injector:modulerr] Failed to instantiate module x due to: Error: [$injector:modulerr] Failed to instantiate module x due to: Error: [$injector:unpr] Unknown provider: xx
Angular Directive: angular-checkbox-set
Links: Github Repo / Live Demo
Angular directive, with recursive support for multiple layers of checkboxes.
Factories, Services, Providers?
For me the revelation came when I realised that they all work the same way: by running something once, storing the value they get, and then cough up that same stored value when referenced through Dependency Injection.
Understanding $watch
Could you tell the difference between these four?
$scope.$watch('foo', fn)$scope.$watch(function() {return $scope.foo}, fn)
$scope.$watch(obj.prop, fn)$scope.$watch(function() {return obj.prop}, fn)
Angular Directive: Click Elsewhere?
Benefit of this solution:
- You only need one bind to
$(document). Other firing of events would depend on the$emitof scope events. - You could use both expressions
click-elsewhere="show=false", andclick-elsewhere="fn()", thanks to$parse.
All Angular Directives That Create Child Scopes
Have this list firmly registered somewhere in the back of your head before embarking on Angular! I can’t tell you how much confusion and pain not realising its existence has caused me. These are the keywords I used to find all the directives that create scope, thanks to @sp00m’s prompt.
Providing that Angular’s documentation is consistent in the way they describe directives, which it seems to be, below is the full list of results, in order of priority level of execution:
Angular Best Practice: Directory Structure
The most important thing is of course to find something that works for you. The other thing is that, as its creator Miško puts it, once you structure it in a particular way, and other people structure it the same way, it makes it easier for you to leap from one project to another.