CODEWITHSUNDEEP
angularjsexpressionangularjs-ng-repeat
irth
irth

Reputation: 1716

How/possible to render elements from angular expressions in ng-repeat

I have an object of arrays that have element names and attribute values:

$scope.dashStuff = {
                        "first name": ['input', 'text' ],
                        "last name": ['input', 'text'],
                        "street number": ['input', 'number'],
                        "street name": ['input', 'text'],
                        "sex": ['input', 'checkbox']
                    }

I want to render them using ngRepeat with the following 

<p ng-repeat="setting in dashStuff"><{{ setting[0] }} type="{{ setting[1] }}"></p>

As you might guess, this renders strings not html. I've tried ng-bind, ng-list, and ng-bind-html without luck.

How is it possible to render these strings as html?

Thank you.

Upvotes: 0

Views: 799

Answers (1)

shaunhusain
shaunhusain

Reputation: 19748

Here's an example of how to write a directive to basically do what you want:

http://plnkr.co/edit/vXaaZPRL2KS4SkPkq7kN

JS

// Code goes here

angular.module("myApp", []).directive("customInput", function(){
    return {
      restrict:"E",
      scope:{element:"=", type:"="},
      link:function(scope, iElem, iAttrs) {
        console.log(scope.element,scope.type);
        var domElement = document.createElement(scope.element);
        domElement.type = scope.type;
        iElem.append(domElement);
      }
    }  
  }
);

angular.module("myApp").controller("MyCtrl", function($scope){
  $scope.dashStuff = {
    "first name": ['input', 'text' ],
    "last name": ['input', 'text'],
    "street number": ['input', 'number'],
    "street name": ['input', 'text'],
    "sex": ['input', 'checkbox']
  }

});

HTML

  <body ng-app="myApp">
    <h1>Hello Plunker!</h1>
    <div ng-controller="MyCtrl">
      <div ng-repeat="settings in dashStuff"><custom-input type="settings[1]" element="settings[0]"></custom-input></div>
    </div>
  </body>

Upvotes: 1

Related Questions