Question

我有一个对象：

var options = {
    NAME_1 : "Name 1",
    TEXT_1 : "Description goes here",
    NAME_2 : "Name 2",
    TEXT_2 : "Description2 goes here",
};

是否可以在ng-repeat内迭代对象的字段？ E.g。

<div ng-repeat="item in options">
    <span class="title">{{item.name}}</span>
    <span class="text">{{item.text}}</span>
</div>

我将非常感谢任何建议。

提前致谢。

Answer 1

绝对！使用以下语法：

<div ng-repeat="(k, v) in options">

您可以猜到，k是密钥，v是密钥的值。

Answer 2

这不会像你想象的那样起作用，也许你的对象看起来像这样，

var options = [
{
name : "Name 1",
text : "Description goes here"
},
{
name : "Name 2",
text : "Description2 goes here"
}
];

现在您可以按照自己的意愿进行迭代。

或者，我可以猜测迭代对象中的所有值，但是你需要记住，这些值并不是真正相互关联，除了只是在同一个对象中。

这是使用ng-if和迭代对象的解决方案。但正如我所提到的，javascript迭代不按顺序排列的对象，所以最好还是重新排序数组中的属性，然后再次迭代。以下内容将重复为NAME_1，NAME_2，TEXT_1，TEXT_2

app.controller('MainCtrl', function($scope) {
  var options = {
    NAME_1 : "Name 1",
    TEXT_1 : "Description goes here",
    NAME_2 : "Name 2",
    TEXT_2 : "Description2 goes here",
};
$scope.options = options;
$scope.check = function(title, key) {
   if(key.split('_')[0] === title) {
     return true;
   } 
}
});

<div ng-repeat="(k,v) in options|orderBy:k">
    <span ng-class="title" ng-if="check('NAME',k)">{{k}}</span>
    <span ng-class="text" ng-if="check('TEXT',k)">{{k}}</span>     
</div>

完整的解决方案：如果你也使用下划线，你可以这样做。

<div ng-repeat="x in optionsArray">
      <span ng-class="title" ng-if="check('NAME',x)">{{x[1]}}</span>
      <span ng-class="text" ng-if="check('TEXT',x)">{{x[1]}}</span>
</div>

app.controller('MainCtrl', function($scope) {
  var options = {
    NAME_1: "Name 1",
    TEXT_1: "Description goes here",
    NAME_2: "Name 2",
    TEXT_2: "Description2 goes here",
  };
  $scope.options = options;
  $scope.optionsArray = _.pairs(options);
  $scope.check = function(title, key) {
    if (key[0].split('_')[0] === title) {
      return true;
    }
  }

});

Angularjs ng-repeat：迭代特殊对象字段

2 个答案: