Angular：如果项目的 属性 不存在，则在 ng-repeat 中设置默认值

Question

是否有可能在 ng-repeat 期间，如果当前项目没有某个 属性，我为其分配一个默认值，类似这样：

<div ng-repeat="item in items" ng-init="item.prop = item.prop || default value"></div>

Answer 1

如果你想显示默认值，它将是：

<div ng-repeat="item in items">
    <div>{{ item.prop || 'Nothing' }}</div>
</div>

如果你想为数组的每个对象分配它，那么在你的控制器中做：

angular.forEach($scope.items, function (item) {
    item.prop = item.prop || 'Nothing';
});

Answer 2

我对您的代码进行了一些更改，它运行正常...

来自：

item.prop = item.prop || default value

至：

new_prop = item.prop || default value

并使用 new_prop 而不是 item.prop

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<script>
  angular.module('app', [])
  .controller('MainCtrl', function($scope) {
    $scope.list = [
      {name: 'a', idx: 1},
      {name: 'b'},
      {name: 'c', idx: 2},
    ];  
  });
</script>

<div ng-app="app" ng-controller="MainCtrl">
  <div ng-repeat="each in list" ng-init="idx = each.idx || 0">
    <span ng-bind="idx"></span>
    <span ng-bind="each.name"></span>
  </div>
  
</div>

Answer 3

最佳实践

这取决于您从何处获取数据，如果您通过 http 请求获取数据，您的数据库中可能应该有默认值。

选项 1

使用 angular 的内置默认管道字符，例如下面的 ng-bind。

<span ng-bind="myVariable || 'My default value'"></span>

备选方案 2

您可以在设置 $scope 之前在循环中编写 if 语句。像这样的东西会进入你的控制器。

if ($scope.data.someData == null){
  $scope.data.someData = yourDefultValue
}

这只是一个概括，您必须将其适应您的代码，但我建议您将默认值放入您的数据库中。它很容易做，如果有你想要的默认值就应该做。