1

3 つの (要素) ディレクティブがあるとします<x/> <y/> and <z/>。

module.directive('x', function() {
    return {
        restrict: 'E',
        template: '<div class="x">{{identifier}}</div>'
    }
});

のディレクティブ<y/> and </z>は似ています。

また、ページ構成オブジェクトの配列もあります。各オブジェクトにはタイプと識別子があります。タイプはディレクティブを示し、識別子はディレクティブのテンプレート内に表示されるデータであり、上記のディレクティブ フラグメントでは {{identifier}} として示されています。

var pageElements = [
{type: 'x',identifier:'123'},
{type: 'z',identifier:'adf'},
{type: 'x',identifier:'qwe'}, 
{type: 'y',identifier:'4ed'},
{type: 'y',identifier:'576'}
]

私のページでは、次のようなものが必要です。

<div id="containingDiv" ng-repeat="elem in pageElements"></div>

次の出力が生成され、pageElements 配列が変更されたときに更新されるようにディレクティブなどを設定する方法を教えてください。

<div id="containingDiv">
    <div class="x">123</div>
    <div class="z">adf</div>
    <div class="x">qwe</div>
    <div class="y">4ed</div>
    <div class="y">576</div>
</div>
4

1 に答える 1

0

コントローラでは、次のようなことを行います。

function myController($scope){
    $scope.pageElements = [
        {type: 'x',identifier:'123'},
        {type: 'z',identifier:'adf'},
        {type: 'x',identifier:'qwe'}, 
        {type: 'y',identifier:'4ed'},
        {type: 'y',identifier:'576'}
    ];
}

次に、HTMLで、bmleiteが提案したように、次のようになります。

<div id="containgDiv">
    <div class="{{elem.type}}" ng-repeat="elem in pageElements">{{elem.identifier}}</div>
</div>

これにより、

<div id="containingDiv">
    <div class="x">123</div>
    <div class="z">adf</div>
    <div class="x">qwe</div>
    <div class="y">4ed</div>
    <div class="y">576</div>
</div>

次に、angular.module（....で、ディレクティブをクラスに接続できます。pageElements配列が更新されるたびに、新しいリストを追加するか、現在のリストを編集するか、現在のリストを削除することで、リストが変更されます。 Angularがあなたのためにそのうなり声の仕事を引き受けます。

于 2012-12-20T01:41:12.150 に答える