Using the javascript array: var cars = [ {"manufacturer":"Toyota", "model":"Rav4", "year":2008, "stock":3, "price":8500}, &

Question

Question

Using the javascript array: var cars = [ {"manufacturer":"Toyota", "model":"Rav4", "year":2008, "stock":3, "price":8500}, &

Using the javascript array:

var cars = [

{"manufacturer":"Toyota",

"model":"Rav4",

"year":2008,

"stock":3,

"price":8500},

{"manufacturer":"Toyota",

"model":"Camry",

"year":2009,

"stock":2,

"price":6500},

{"manufacturer":"Toyota",

"model":"Tacoma",

"year":2016,

"stock":1,

"price":22000},

{"manufacturer":"BMW",

"model":"i3",

"year":2012,

"stock":5,

"price":12000},

{"manufacturer":"Chevy",

"model":"Malibu",

"year":2015,

"stock":2,

"price":10000},

{"manufacturer":"Honda",

"model":"Accord",

"year":2013,

"stock":1,

"price":9000},

{"manufacturer":"Hyundai",

"model":"Elantra",

"year":2013,

"stock":2,

"price":7000},

{"manufacturer":"Chevy",

"model":"Cruze",

"year":2012,

"stock":2,

"price":5500},

{"manufacturer":"Dodge",

"model":"Charger",

"year":2013,

"stock":2,

"price":16000},

{"manufacturer":"Ford",

"model":"Mustang",

"year":2009,

"stock":1,

"price":8000},

]

And my current HTML/AngularJS:

<!DOCTYPE html>

<html>

<head>

<title>Homework 5</title>

<style>

body{background-color: #95b8cf;}

table {

font-family: arial, sans-serif;

border-collapse: collapse;

width: 100%;

}

td, th {

border: 3px solid #000000;

text-align: left;

padding: 8px;

}

tr:nth-child(even) {

background-color: #dddddd;

}

</style>

</head>

<body>

<tr><td>Manufacturer</td><td>Model</td><td>Year</td><td>Stock</td><td>Price</td><td>Option</td></tr>

<td> {{obj.manufacturer}} </td>

<td> {{obj.model}} </td>

<td> {{obj.stock}} </td>

<td> {{obj.price | currency}} </td>

<td> {{obj.option}} </td>

</tr>

</table>

</div>

</body>

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {

$scope.cars = [

{"manufacturer":"Toyota", "model":"Rav4","year":2008,"stock":3,"price":8500},

{"manufacturer":"Toyota", "model":"Camry","year":2009,"stock":2,"price":6500},

{"manufacturer":"Toyota", "model":"Tacoma","year":2016,"stock":1,"price":22000},

{"manufacturer":"BMW","model":"i3","year":2012,"stock":5,"price":12000},

{"manufacturer":"Chevy","model":"Malibu","year":2015, "stock":2,"price":10000},

{"manufacturer":"Honda","model":"Accord","year":2013,"stock":1,"price":9000},

{"manufacturer":"Hyundai","model":"Elantra","year":2013,"stock":2,"price":7000},

{"manufacturer":"Chevy","model":"Cruze","year":2012,"stock":2,"price":5500},

{"manufacturer":"Dodge","model":"Charger","year":2013,"stock":2,"price":16000},

{"manufacturer":"Ford","model":"Mustang","year":2009,"stock":1,"price":8000},

];

}

</script>

</html>

Complete the following:

In the “option” column, each row should have a button with the text “increment” that whenever it is clicked, it will increase the stock number of that specific car on that row by one. (Use ng-click)

engineering Computer-Science

Add a comment Improve this question Transcribed image text

Answer 1

Answer #1

Answer:

<!DOCTYPE html>

<html>

<head>

<title>Homework 5</title>

<style>

body{background-color: #95b8cf;}

table {

font-family: arial, sans-serif;

border-collapse: collapse;

width: 100%;

}

td, th {

border: 3px solid #000000;

text-align: left;

padding: 8px;

}

tr:nth-child(even) {

background-color: #dddddd;

}

</style>

</head>

<body>

<tr><td>Manufacturer</td><td>Model</td><td>Year</td><td>Stock</td><td>Price</td><td>Option</td></tr>

<td> {{obj.manufacturer}} </td>

<td> {{obj.model}} </td>

<td> {{obj.stock}} </td>

<td> {{obj.price | currency}} </td>

<td> <button ng-click="obj.stock = obj.stock + 1" ng-init="obj.model={{obj.model}}">increment</button> </td>