angularjsnotes/Day 4/readmes/angular_update.md

Lesson Objectives

1. Completed angular_delete.md
2. change css with angular
3. simple update with double click
4. Make form make AJAX request on double click

Changing css with angular

Toggling a true/false value

We will want to change the appearance of the holidays we've celebrated and store this data in our database. Our Holiday object has a celebrated property that can be either true or false.

Let's make a new function this.updateCelebrated in our app.js

In js/app.js

this.updateCelebrated = holiday => {
  console.log ("Let's celebrate", holiday.name, 'Day!')
}

In index.html

<tr ng-repeat="holiday in ctrl.holidays">
  <td ng-dblclick="ctrl.updateCelebrated( holiday )"> {{ holiday.name }} Day</td>
  <td ng-click="ctrl.deleteHoliday( holiday._id )">x</td>
</tr>

So, now when we double click our holiday name, we should get a console.log

Let's create some toggle functionality

In js/app.js

this.updateCelebrated = holiday => {
  console.log("Let's celebrate", holiday.name, 'Day!')
  holiday.celebrated = !holiday.celebrated
  console.log(holiday.celebrated)
}

Now, every time we double click our holiday name, the celebrated property toggles between true and false

Using our true/false value to set a css class

We can base the css class on a boolean property we have in our holiday object. We have a property called celebrated, which by default, is false, but we can build in functionality to make it toggle between true and false.

We'll use a ternary operator. This fancy term is just a way to write a short-hand if-else statement.

A ternary operator is made up of 5 components

1. The statement to be evaluated. This statement will be evaluated if it is truthy or falsey.
2. a question mark ?
3. what happens if the statement is truthy
4. a : to separate the truthy evaluation from the falsey one
5. what happens if the statement is falsey

So if we have

(true) ? 'hooray' : 'boo'

This will evaluate to 'hooray'

or

(false) ? 'hooray' : 'boo'

This will evaluate to 'boo'

So, we can now dive into our index.html and change the css property based on the celebrated boolean value.

In index.html

<tr ng-repeat="holiday in ctrl.holidays">
  <td ng-dblclick="ctrl.updateCelebrated( holiday )"
      ng-class="(holiday.celebrated ? 'celebrated' : '' )"
  > {{ holiday.name }} Day</td>
  <td ng-click="ctrl.deleteHoliday( holiday._id )">x</td>
</tr>

Now, when we refresh the page, we can double click on each holiday name and change its CSS every time, based on the celebrated value

Updating our new celebrated value in our database

Every time we refresh our page, we lose our info of whether or not we celebrated our holiday.

We can use an $http call to update our database

In js/app.js

this.updateCelebrated = holiday => {
  holiday.celebrated = !holiday.celebrated
  $http({
    method: 'PUT',
    url: '/holidays/' + holiday._id,
    data: { celebrated: holiday.celebrated }
  }).then(response => {
    console.log(response.data.celebrated)
  }, error => {
    console.log(error.message)
  })
}

Cool! Now we can update our database and when we reload our page it remembers if we have celebrated the holiday

Take Aways

• Being able to manipulate css with angular adds an exciting level of interactivity
• Ternary operators are a neat way to keep our code short
• Update requires a couple extra steps, but when we make a plan and take it step by step it is not so bad

Onwards

Angular Show One Holiday