補間でスコープ名を解析する方法は？

Question

私はこのようなコードを持っている：

<div ng-repeat="(key, category) in shop.categories"> 
    <div ng-repeat="(key, group) in category.groups"> 
    <span ng-bind="'groupPrice-' + ($parent.$index + 1) + '-' + ($index + 1)"></span> 
    </div> 
</div> 

私は例$scope.groupPrice-1-1の<span>値に表示したい、$scope.groupPrice-1-2など

どのように私は、スコープの値を表示するには、私のng-bindを解析することができますか？スコープのこの表示名です。値ではありません。

Answer 1

文字列からオブジェクトのプロパティを評価するために、angleディレクティブを試してください。

HTMLコード：

<div ng-app="vkApp"> 
    <div ng-controller="vkController">   
     <span compile="groupPrice_1_1"></span> 
     <br> 
     <span compile="groupPrice_1_2"></span> 
    </div> 
</div> 

角度スクリプト：

angular.module('vkApp', []); 

angular.module('vkApp') 
    .controller('vkController', ['$scope', '$compile', function ($scope, $compile) { 
     $scope.groupPrice_1_1 = "Hi man !"; 
     $scope.groupPrice_1_2 = "lol !"; 
    }]); 

    // declare a new module, and inject the $compileProvider 
angular.module('vkApp') 
    .directive('compile', ['$compile', function ($compile) { 
     return function(scope, element, attrs) { 
      scope.$watch(
      function(scope) { 
       // watch the 'compile' expression for changes 
       return scope.$eval(attrs.compile); 
      }, 
      function(value) { 
       // when the 'compile' expression changes 
       // assign it into the current DOM 
       element.html(value); 

       // compile the new DOM and link it to the current 
       // scope. 
       // NOTE: we only compile .childNodes so that 
       // we don't get into infinite loop compiling ourselves 
       $compile(element.contents())(scope); 
      } 
     ); 
    }; 
}]); 

JSFiddle here

クロム。 angular ng-bind-html and directive within it

注：代わりに$scope.groupPrice-1-1を$scope.groupPrice_1_1に変更する必要があります。

このヒントが役に立ったら嬉しいです。