Angularjs 如何/可能在ng repeat中从角度表达式渲染元素_Angularjs_Expression_Ng Repeat

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

angularjs

Angularjs 如何/可能在ng repeat中从角度表达式渲染元素,angularjs,expression,ng-repeat,Angularjs,Expression,Ng Repeat,我有一个数组对象，它具有元素名和属性值： $scope.dashStuff = { "first name": ['input', 'text' ], "last name": ['input', 'text'], "street number": ['input', 'number'], "street

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

$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

谢谢。

下面是一个如何编写指令的示例，以基本实现您的目标：

HTML


你好，普朗克！

确切的输出是什么？？？输出是：您需要一个指令来构建DOM元素。我建议您编写一个指令，接受对象或两个参数，在它的链接函数中，您可以构建适当的元素并将其添加到DOM中。谢谢，我知道您要做什么了。但是，通过在指令内部确定范围，它会阻止ctrl$scope数据。我想这就是为什么你的plunker没有显示任何数据？我没有在ng模型或输入值上附加任何内容，所以他们目前没有显示任何数据。关于我创建的隔离作用域的第一部分，您是对的，这将使它不从控制器作用域继承，这样做通常是好的，这样指令是可重用的，并且不一定依赖于上下文。您可以解释/显示您希望它在数据中显示的内容吗？您可以通过另一个对象使用ng模型绑定到输入，但您必须使用$compile，以便它评估ng模型指令。谢谢，最终，我想用各种输入/文本区域填充dom。我使用ui路由器状态视图来获取基于用户角色的用户设置，用户角色在单独的视图控制器中定义。所以，我确实想要这种可重用性，但也希望表单模型依赖于状态视图控制器。啊，我仍然在使用一个templateUrl，希望它在那里。我的错。这个答案太棒了，很有效！谢谢你，肖恩！没问题，很高兴你弄明白了。

// 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']
  }

});

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