Angularjs ng-repeat:迭代一个特殊的对象字段

Question

我有一个对象:

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

是否可以在ng-repeat中遍历对象的字段?例如

<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;
    }
  }
});