Question

我是AngularJS的新手，我试图想象自己，如何用角度做这个场景：

假设我们有20个不同的div：

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

现在，在某些控制器中，我们正在加载JSON，即：

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

现在，我想渲染这些元素，因此输出将是第一个JSON对象：

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

并将其附加到#div0。

Answer 1

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

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>

Answer 2

如果您可以控制从服务器返回的JSON，则以下内容将简化：

控制器/ JSON：

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

标记：

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

在jQuery中，我们通常会考虑将内容/ DOM更改与ID相关联。
在Angular中，我们尝试在不使用ID的情况下声明内容的去向。

AngularJS - 将元素追加到指定的DOM元素

2 个答案: