Question

我有一个具有元素名称和属性值的数组对象：

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

谢谢。

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

如何/可能从ng-repeat中的角度表达式渲染元素

1 个答案: