Angular

Use {{ ...}} to evaluate angular expressions

Adding numbers: {{1 + 2}}

Adding strings: {{"Hi" + " there"}}

From scope in controller: {{event.name}}

Built-in filters

Syntax: {{input | filtername}}

Filter uppercase: {{event.name | uppercase}}

Filter decimals: {{5 | number:3}} and {{1.2345 | number:2}}

Filter currency: {{2 | currency}}

For debugging, use the json filter: {{ {a:3,b:'hi', c:{a:35} } | json }}

(For custom filters, se below.)

Some angular directives

ng-non-bindable makes it possible to write angular syntax without evaluating the expression:

Use {{ ...}} to evaluate angular expression


External link with ng-href: Click to follow link


ng-show and ng-hide: Reads the boolValue from scope in controller. (Change boolValue to toggle the text):

ng-show using property from scope

ng-hide using property from scope


Use ng-disabled and property from scope to disable button:

Use ng-src to prevent loading to early:

{{event.name}}
{{event.name}}
{{event.name}}
{{event.name}}


More directives

ng-app: Defines the angular application.

ng-controller: Defines the controller.

ng-submit Makes it possible to call a function in the controller and pass in the info that should be submitted. (See Review submit button in Gem Store for example)

2-way binding

ng-model binds the value of the HTML controls (input, textarea, select) to the appliction data.

ng-bind binds the application data to the HTML view. It is equivalent to the {{}}

Use info from scope in controller

Style with info from scope in controller

  • mystyle is: {color:red}
  • myclass is: "blue"

Use ng-class to style with info from myclass:

Styled with myclass

Use ng-style to style with info from mystyle:

Text styled with mystyle.

Combine ng-style with event.name from controller/scope:

Style comes from ng-style. event.name shows here: {{event.name}}

Combine ng-style with ng-bind event.name:

Populate page with info from scope in controller

Date: {{event.date}}
Date: {{event.javascriptdate |date:'mediumDate'}} (using built-in filter date)
Time: {{event.time}}
Price: {{34 |currency}} (using build-in filter currency)
Address:
{{event.location.address}}
{{event.location.postalcode}}, {{event.location.city}}

About displaying and voting on the Sessions below

  • Use ng-repeat to show as many sessions as there are in event.sessions.
  • field session.upVoteCount is shown in the badge
  • Use ng-click to call function upVoteSession or downVoteSession for the correct session
  • (TODO: Figure out why the below displays so ugly...)
  • ng-model is used in dropdown lists to connect them to these models in the scope. (Also see the review fields in the example about the Gem Store. There the different input fields/textarea/dropdownlist are connected to the properites in the scope) ng-model handles the 2-way binding, and can be applied to:
    • input
    • select
    • textarea

About the multiple filters that are applied on this ng-repeat

  • Filter orderBy reads from property sortorder.
    • sortorder is set to a default value in the controller, but is dynamically changed depending on the selection in the dropdown list
    • Name is shown as default in the dropdown list because of "selected" value
    • Use a "-" for descending order
  • Filter limitTo to limit results to e.g. 2
  • Filter filter uses query, which is not a property in the controller.
    • If just use "query", it will look for all occations in the text, i.e also showing the matches to these words
    • If using "query:level" we narrow it to only use the field level.
  • Custom filters: duration is a custom filter. It is placed in a filters.js file.
    • syntax: {{input | filtername}}
    • The return function takes the input. Here it is the session.duration

Sessions

Order By: Show:

    • {{session.upVoteCount}}

      {{session.name}}

      Duration: {{session.duration | duration}}

      {{session.description}}