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

Question

我是AngularJS的新手，我試圖想象自己，如何使用angular實現此方案：

假設我們有20個不同的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 。

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。