You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
133 lines
3.7 KiB
133 lines
3.7 KiB
## Lesson Objectives
|
|
|
|
1. Completed `angular_delete.md`
|
|
1. change css with angular
|
|
1. simple update with double click
|
|
1. 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`**
|
|
|
|
```js
|
|
this.updateCelebrated = holiday => {
|
|
console.log ("Let's celebrate", holiday.name, 'Day!')
|
|
}
|
|
|
|
```
|
|
|
|
**In `index.html`**
|
|
|
|
```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`**
|
|
|
|
```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.](https://www.sitepoint.com/javascript-truthy-falsy/)
|
|
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`**
|
|
|
|
```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`**
|
|
|
|
```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](angular_show.md)
|