AngularJS转换逗号分隔值

Question

我想一个JSON内容到逗号分隔值转换成一个表格式时获得一个额外的空间。

我通过使用table和ng-repeat实现了这一目标，但是我在每个值的末尾都获得了额外的空间。

HTML代码：

<div ng-controller="JsonConvertController"> 
    <div> 
     <button class="btn btn-success" id="btnjsonConvert" 
       ng-click="convertJsonToServiceValues()">Convert Json</button> 
    </div> 

    <table> 
     <thead> 
     <tr> 
      <th style="width:100px;">Types</th> 
      <th style="width:300px;">Values</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="types in resultJson"> 
      <td><span ng-bind="types.typeName"></span> 
      </td> 
      <td> 
      <span ng-repeat="type in resultValues | filter: {typeName: types.typeName}"> 
      <span ng-bind="type.values"></span> 
      <span ng-show="!$last">,</span> 
      </span> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
</div> 

控制器代码：

function JsonConvertController($scope, $http) { 

    $scope.displayTable = true; 

    $http.get('data.json').success(function(data) { 
    $scope.jsonContent = data; 
    }); 

    $scope.convertJsonToServiceValues = function() { 
    $scope.resultJson = []; 
    $scope.resultValues = []; 

    angular.forEach($scope.jsonContent[0].types, function(types) { 
     $scope.resultJson.push({ 
     typeName: types.name, 
     }); 

     angular.forEach(types.domainTypes.codedValues, function(type) { 
     $scope.resultValues.push({ 
      typeName: types.name, 
      values: type.name 
     }); 
     }); 
    }); 
    }; 
} 

样品JSON样子，[完全代码是在plunker]

[{ 
"version": 0.01, 
"types": [{ 
"id": 1, 
"name": "Type1", 
"domainTypes": { 
    "type": "codedValue01", 
    "codedValues": [{ 
    "name": "Type1Code1", 
    "code": "t1c1" 
    }, { 
    "name": "Type1Code2", 
    "code": "t1c2" 
    }, { 
    ... 
    ... 
    ... 
    }] 
} 
}, { 
"id": 2, 
"name": "Type2", 
"domainTypes": { 
    "type": "codedValue02", 
    "codedValues": [{ 
    "name": "Type2Code1", 
    "code": "t2c1" 
    }, { 
    "name": "Type2Code2", 
    "code": "t2c2" 
    }, { 
    ... 
    ... 
    }] 
} 
}] 

因此，输出就要像下面：

Types Values 
Type1 Type1Code1 , Type1Code2 , Type1Code3 , Type1Code4 , Type1Code5 , 
     Type1Code6 , Type1Code7 , Type1Code8 , Type1Code9 
Type2 Type2Code1 , Type2Code2 , Type2Code3 , Type2Code4 , Type2Code5 
Type3 Type3Code1 
Type4 Type4Code1 , Type4Code2 , Type4Code3 , Type4Code4 , Type4Code5 

问题：每个值的结束，我得到一个额外的空间。 1和,后意味着Type1Code1 ,，我得到的空间。

我不需要这个。我怎样才能删除/修剪？

我试过<span>{{type.values}}</span>代替<span ng-bind="type.values"></span>，但得到了同样的结果。

手动设置trim()一样，<span ng-bind="trimContent(type.values)"></span>和控制器，定义函数

$scope.trimContent = function (content) { 
    return content.trim(); 
}; 

这也不能工作。

因为我在JSON内容中没有任何额外的空间。什么是问题？

如何在每个值的结尾没有额外空间的情况下获得逗号分隔值？

为了获得更好的结果，我说我的代码在Plunker

Answer 1

换行符在HTML算作一个空间。刚刚链跨度在一起，彼此之间没有空格

<span ng-repeat="type in resultValues | filter: {typeName: types.typeName}"><span ng-bind="type.values"></span><span ng-show="!$last">, </span></span> 

http://plnkr.co/edit/ybTEO8AvgU3XaN7tsRqT?p=preview

---

或者，你可以使用this answer，避免ngRepeat完全