AngularJS - 附加元素，以指定的DOM元素

我是新来AngularJS和我试图想象我自己，如何做到这一点的场景与角：AngularJS - 附加元素，以指定的DOM元素

比方说，我们有20周difftent的div：

<div id="div0"></div> 
<div id="div1"></div> 
... 
<div id="div19"></div>

现在，在一些控制器，我们加载JSON，FE：

[ 
{label: "Lorem ipsum", position: "div0"}, 
{label: "Dolor", position: "div2"}, 
{label: "Lorem ipsum", position: "div8"} 
]

现在，我想使这个元素，所以输出将是第一个JSON对象：

{label: "Lorem ipsum", position: "div0"} - ><p>{{label}}</p> - ><p>Lorem</p>

，并把这段#div0。

来源

2012-11-09 Michael Prokopowicz

如果我明白你的问题，我认为这就是答案：

app.controller('MyCtrl', function($scope) { 
    $scope.items = [ 
     {label: "Lorem ipsum", position: "div0"}, 
     {label: "Dolor", position: "div2"}, 
     {label: "Lorem ipsum", position: "div8"} 
    ]; 
});

和这里的标记：

<div ng-repeat="item in items" id="{{item.position}}"><p>{{item.label}}</p></div>

这几乎是所有有将它。

编辑

的OP想将数据放置到硬编码的HTML ...这样做，你可以做这样的事情：

app.controller('MyCtrl', function($scope) { 
    $scope.items = [ 
     {label: "Lorem ipsum", position: "div0"}, 
     {label: "Dolor", position: "div2"}, 
     {label: "Lorem ipsum", position: "div8"} 
    ]; 

    $scope.getValue = function(position) { 
     for(var i = 0; i < $scope.items.length; i++) { 
     var item = $scope.items[i]; 
     if(item.position == position) { 
      return item.label; 
     } 
     } 
     return ''; 
    }; 
});

标记，像这样：

<div id="div0">{{getValue('div0')}}</div> 
<div id="div1">{{getValue('div1')}}</div> 
<div id="div8">{{getValue('div8')}}</div>

来源

2012-11-09 13:38:19

不错不错!!!+1 – AnandVeeramani

Thaks的答案，但我心里有一些不同势的情况：让我们假设，在我们的布局模板中，我们已经硬编码了： '

' 从JSON在我们的控制，我们得到的信息，我们应该把“Lorem”in EXSISTING div＃div1和“Ipsum”在现存div＃div2 ' [ {0}标签：“Lorem”，位置：“div1”}， {label：“Ipsum”，position：“div2” } ]' 所以角运行之前我们的DOM会是这样： '

' 它应该像后： '

Lorem

Ipsum

' –

这看起来不错:) 和奖金的问题：这是可能做到这一点与jQuery生成的内容？（我有一个jQuery生成的“网格”）。看看这个：http：//homersoft-www.dyndns.org/wh-mobileweb/ 这些div是与JQuery产生的。 –

如果你有过被从服务器返回的JSON控制，下面将事情简单化：

控制器/ JSON：

$scope.contents = { 
    content0: "Lorem", 
    content1: "lpsum" 
};

标记：

<div>{{contents.content0}}</div> 
<div>{{contents.content1}}</div>

在jQuery中，我们通常想到的内容相关联/ DOM与ID的变化。
在Angular中，我们尝试声明内容应该放在哪里，而不使用ID。

来源

2012-11-09 22:28:13

AngularJS - 附加元素，以指定的DOM元素

回答

相关问题