0

私は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。

4

2 に答える 2

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>
于 2012-11-09T13:38:19.280 に答える
0

サーバーから返されるJSONを制御できる場合は、次のようにすると簡単になります。

コントローラー/JSON：

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

マークアップ：

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

jQueryでは、通常、コンテンツ/DOMの変更をIDに関連付けることを考えています。
Angularでは、IDを使用せずに、コンテンツの移動先を宣言しようとします。

于 2012-11-09T22:28:13.147 に答える