0

I have code like this:

<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>

I want to display in <span> value of example $scope.groupPrice-1-1, $scope.groupPrice-1-2 etc.

How can I parse my ng-bind to display value of scope? Now this display name of scope, not value.

Jan Kowalski
  • 205
  • 2
  • 7
  • 14

1 Answers1

2

Try the angular directive for eval your string to object properties.

The html code:

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

The angular script:

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

Cr. angular ng-bind-html and directive within it

Note: you must change $scope.groupPrice-1-1 to $scope.groupPrice_1_1 instead.

Hope this tip may be help.

Community
  • 1
  • 1