JSFiddle - React, Tailwind, and code Playground
HTML
<head lang="en">
<title>Demo</title>
</head>
<body ng-app="Demo">
<div ng-controller="DemoController">
<table>
<tr>
<th>Name</th>
<th>City</th>
<th>Order Total</th>
<th>Joined</th>
<th>Orders</th>
<th> </th>
</tr>
<tr ng-repeat="cust in customers">
<!--<span </span>-->
<td>{{ cust.name }}</td>
<td>{{ cust.city }}</td>
<td>{{ cust.orderTotal | currency }}</td>
<td>{{ cust.joined | date }}</td>
<td>
<button ng-click="perLineText(cust.id)">{{buttonText}}</button>
</td>
</tr>
</table>
</div>
JavaScript
angular.module('Demo',[])
.controller('DemoController',['$scope',function($scope){
$scope.buttonText = 'Start';
$scope.perLineText = function(customerId){
if (customerId === 1) {
this.buttonText = 'Stop';
};
console.log(customerId);
console.log($scope.customers.id);
};
$scope.customers = [
{
id: 1,
joined: '2000-12-02',
name:'John',
city:'Chandler',
orderTotal: 9.9956,
orders: [
{
id: 1,
product: 'Shoes',
total: 9.9956
}
]
},
{
id: 2,
joined: '1965-01-25',
name:'Zed',
city:'Las Vegas',
orderTotal: 19.99,
orders: [
{
id: 2,
product: 'Baseball',
total: 9.995
},
{
id: 3,
product: 'Bat',
total: 9.995
}
]
},
{
id: 3,
joined: '1944-06-15',
name:'Tina',
city:'New York',
orderTotal:44.99,
orders: [
{
id: 4,
...