Question

我正在尝试绑定来自父重复的ng-repeat对象名称（请参阅“dType.name”），但名称不会绑定。我尝试了两种方法：

（这只是一个片段）

**HTML:** 
(1)

    <div ng-repeat="dType in dishesTypes">                           
      <span class="small-title" class="separator">{{dType.name}}</span>                       
      <div class="row" ng-repeat="(key,dish) in dType.name">               
          <div class="col-md-6">{{dish.dish}}</div>
          <div class="col-md-1">{{dish.type}}</div>                       
      </div>
    </div>

(2) 

    <div ng-repeat="dType in dishesTypes">                           
      <span class="small-title" class="separator">{{dType.name}}</span>                       
      <div class="row" ng-repeat="(key,dish) in dValues[dType.name]">               
          <div class="col-md-6">{{dish.dish}}</div>
          <div class="col-md-1">{{dish.type}}</div>                       
      </div>
    </div>


**Javascript**

    menuApp.controller('appController', ['$scope',  
        function($scope){

        $scope.dishesTypes = [
            {name:'main'},
            {name:'sides'},
            {name:'desserts'}
        ];

        $scope.dValues = {main: 'main', sides: 'sides', desserts: 'desserts'};

        $scope.main = // some values from DB;
        $scope.sides = // some values from DB;
        $scope.desserts = // some values from DB;

}]);

提前感谢您的帮助！

Answer 1

您的第二种方法是尝试迭代字符串。它没有第二次解析dValues [dType.name]的结果来为你提供你正在寻找的对象。要解决这个问题，你可以用$ eval包装它以强制进行另一次评估。

<div ng-repeat="dType in dishesTypes">                           
  <span class="small-title" class="separator">{{dType.name}}</span>                       
  <div class="row" ng-repeat="dish in $eval(dValues[dType.name])">               
      <div class="col-md-6">{{dish.dish}}</div>
      <div class="col-md-1">{{dish.type}}</div>                       
  </div>
</div>

这是一个工作的plunker： http://plnkr.co/edit/Cow37iL2nN2L6mcDPND3?p=preview

您也可以调用一个函数，并解析控制器中的所有内容，如下所示： http://plnkr.co/edit/E2vQEaVQHEOvJqIihcOD?p=preview

<div ng-repeat="dType in dishesTypes">                           
  <span class="small-title" class="separator">{{dType.name}}</span>                       
  <div class="row" ng-repeat="dish in getDishes(dType.name)">               
      <div class="col-md-6">{{dish.type}}</div>
      <div class="col-md-1">{{dish.dish}}</div>                       
  </div>
</div>

$scope.getDishes = function(item)
{
  return $scope.$eval($scope.dValues[item]);
}

绑定ng-repeat对象名称不起作用

1 个答案: