设置带有角度物体的桌子

Setting table with object in angular

本文关键字：设置      更新时间：2023-09-26

我有一个对象想放在表中。对象似乎是：{"text":"111","order":["1","2","3","4","5"]}可能有数组和简单的字符串。那么，如果我希望表格看起来像这样，我如何将这个对象放在表中：

property   value
text       111
order      1,2,3,4,5

我的表显示在值列中 ["1","2","3","4","5"] 而不是 1,2,3,4,5 .

这是我写的：

<tr data-ng-repeat="(key,val) in object">
    <td>
        {{ key }}
    </td>   
    <td>
        {{val}}
    </td>        
</tr>

我也尝试过ng-swtich但没有用。

下面是一个示例，它检查值是否为数组并将它们连接为字符串。

目录：

 <tr data-ng-repeat="(key,val) in object">
    <td>
        {{ key }}
    </td>   
    <td>
        {{val | isArray}}
    </td>        
  </tr>

控制器：

app.controller('MainCtrl', function($scope) {
  $scope.object = {"text":"111","order":["1","2","3","4","5"]};
});
app.filter("isArray", function() {
      return function(input) {
        var isArray = angular.isArray(input);
        if(isArray)
          return input.join();
        return input;
      };
});

此处的工作代码

这就是你所追求的吗？

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="app" ng-controller="MyTableController">
  <tr data-ng-repeat="(key,val) in data">
    <td>
      {{ key }}
    </td>
    <td >
      {{ val | join: ', ' }}
    </td>        
  </tr>
</table>
<script>
angular.module('app', [])
  // Filter that joins the input with the supplied separator
  .filter('join', function () {
    return function (value, separator) {
      if (typeof value.join === 'function') {
        return value.join(separator);
      } else {
        return value;
      }
    }
  })
  .controller('MyTableController', function ($scope) {
    $scope.data = {"text":"111","order":["1","2","3","4","5"] };
  });
</script>

相关文章：