Updating text content of td element - angularjs

Question

In this fiddle I'm attempting to allow the user view more characters of text with an html element with "Show More" is clicked :
http://jsfiddle.net/7og42xxf/25/
src :
<div ng-app="test">
<div ng-controller="ShoppingCartCtrl">
<br />
<table>
</table>
<br />
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td ng-bind-html="item.Name">{{truncate(item.Name) }} <a id="id+$index" href ="#" ng-click="showMore('test'+$index)">Show More</a></td>
<td>{{item.Price }}</td>
<td>{{item.Quantity}}</td>
</tr>
</tbody>
</table>
<br />
</div>
</div>
.bold { font-weight:bold; }
table td{
padding: 10px;
}
table th{
font-weight: bold;
text-align: center;
}
var modul = angular.module("test", []);
modul.controller('ShoppingCartCtrl', function($scope , $document) {
$scope.items = [
{Name: "Soap", Price: "25", Quantity: "10"},
{Name: "Shaving cream", Price: "50", Quantity: "15"},
{Name: "Shampoo", Price: "100", Quantity: "5"}
];
$scope.showMore = function(item){
console.log(item)
}
$scope.truncate = function(item){
return item.substring(0 , 2)
}
});
But I'm unsure how to inject the extra text characters. Currently I'm just accessing the id element and outputting to console :
$scope.showMore = function(item){
console.log(item)
}
How to output the set the rest of the td element text when "Show More" is clicked ?

Answer 1

You can use ng-show/ng-hide directive please see demo below.
var modul = angular.module("test", []);
modul.controller('ShoppingCartCtrl', function($scope, $document) {
$scope.items = [{
Name: "Soap",
Price: "25",
Quantity: "10"
}, {
Name: "Shaving cream",
Price: "50",
Quantity: "15"
}, {
Name: "Shampoo",
Price: "100",
Quantity: "5"
}];
$scope.showMore = function(item) {
console.log(item)
}
$scope.truncate = function(item) {
return item.substring(0, 2)
}
});
.bold {
font-weight:bold;
}
table td {
padding: 10px;
}
table th {
font-weight: bold;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
<div ng-controller="ShoppingCartCtrl">
<br />
<table></table>
<br />
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td ng-bind-html="item.Name">
<span ng-hide="item.more">{{truncate(item.Name) }}</span>
<a ng-hide="item.more" ng-click="item.more =!item.more">Show More</a>
<span ng-show="item.more">{{item.Name}}</span>
<a ng-show="item.more" ng-click="item.more =!item.more">Show Less</a>
</td>
<td>{{item.Price }}</td>
<td>{{item.Quantity}}</td>
</tr>
</tbody>
</table>
<br />
</div>
</div>