使用ngRepeat在同一級創建不同的元素

我想使用配置對象來顯示列表。問題是這個列表有它可以包含的不同類型的元素：item，divider和subheader。使用ngRepeat在同一級創建不同的元素

此列表一個簡單的配置可能是：

var list = [ 
    "item", 
    "item", 
    "divider", 
    "subheader", 
    "item", 
    "item" 
];

我怎樣寫一個ngRepeat屬性，將輸出是這樣的：

<md-menu-content> 
    <md-menu-item>...</md-menu-item> 
    <md-menu-item>...</md-menu-item> 
    <md-menu-divider></md-menu-divider> 
    <md-subheader>...</md-subheader> 
    <md-menu-item>...</md-menu-item> 
    <md-menu-item>...</md-menu-item> 
</md-menu-content>

我什至不知道這是可能的。查看ngRepeat的文檔，它只能用作屬性，所以像<ng-repeat>...</ng-repeat>這樣的東西不是一個選項。 md-menu-item,md-menu-divider和md-subheader也必須是元素，因爲它們是Angular Material的一部分，即使列表項和子標題沒有特別限制爲一個元素（不像divider），它們的CSS樣式被寫爲僅限元素。

我也打得四處ngRepeatStart，但是這對ngRepeat替代，而他們，就我所看到的，不能一起使用，以便ngRepeat將高於ngRepeatStart一個級別。

來源

2016-01-14 gligoran

我想你想是這樣的：http://stackoverflow.com/questions/21297121/dynamic-attributes-with- angularjs – devqon

這有沒有解決？我需要非常相似的東西。 – nixkuroi

使用從this answer指令，你可以做類似如下：

$scope.list = [ 
    "item", 
    "item", 
    "divider", 
    "subheader", 
    "item", 
    "item" 
]; 
$scope.attrs = []; 
for(var i = 0; i < $scope.list.length; i++){ 
    $scope.attrs.push([{attr: 'md-menu-' + $scope.list[i], value: ''}]); 
}

HTML：

<div ng-repeat="item in attrs" dyn-attr="item"> 
    something 
</div>

See this jsfiddle

當然，你可以調整這個不過你想要的。鏈接答案的指令添加基於列表的屬性，但您可能需要創建一個指令，只是使用類似dyn-md-attr="item"

來源

2016-01-14 11:15:50 devqon

使用@devqon的答案我有一個局部解決方案，但會產生大量需要處理的不必要的摘要。不過，它會創建一個動態元素，並使用替換當前元素的指令。

的小提琴是在這裏：http://jsfiddle.net/qk96y2rw/

下面的代碼：

myApp.directive('dynAttr', function() { 
    return { 
     scope: { list: '=dynAttr' }, 
     link: function(scope, elem, attrs){ 
     //console.log(scope.list); 
      for(attr in scope.list){ 
       if (scope.list[attr].attr) { 
       console.log(scope.list[attr].attr); 
       var replacementElement = document.createElement(scope.list[attr].attr); 
       replacementElement.innerHTML = elem.html(); 
       elem.replaceWith(replacementElement); 

       } 
      } 
     } 
    }; 
});

來源

2016-11-18 19:47:49 nixkuroi

使用ngRepeat在同一級創建不同的元素

回答

相關問題