Как / возможно сделать элементы из угловых выражений в ng-repeat

У меня есть объект массивов, которые имеют имена элементов и значения атрибутов:

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

Я хочу сделать их с помощью ngRepeat со следующим

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

Как вы можете догадаться, это делает строки не HTML. Я попробовал ng-bind, ng-list и ng-bind-html без удачи.

Как можно представить эти строки в виде HTML?

Спасибо.

Источник

1 ответ

Вот пример того, как написать директиву, которая в основном делает то, что вы хотите:

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>
Источник
Другие вопросы по тегам