需求大致如图所示，由于本人也是新接触AngularJS，研究好久，制作了一个demo,代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"/> -->
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<div ng-repeat="x in names">
<div ng-if="x.name.length > 5 && x.flag" ng-click="show(x)">{{ x.shortname}} <span style="color:red">></span></div>
<div ng-if="x.name.length > 5 && !x.flag" ng-click="hide(x)">{{ x.name}} <span style="color:red"><</span></div>
<div ng-if="x.name.length <= 5">{{ x.name}}</div>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'我有一头小毛驴我从来也不骑'},
{name:'有一天我高高兴兴骑着它去赶集'},
{name:'我手里拿着小皮鞭心里正得意'}
];
for(var i=0;i<$scope.names.length;i++){
$scope.names[i].shortname= $scope.names[i].name.substring(0,5);
}
$scope.show = function(x){
x.flag = false;
}
$scope.hide = function(x){
x.flag = true;
}
});
</script>
</body>
</html>