角度在不同的列表上設置不同的ID

我試圖在固定寬度div元素內滾動ul列表。我們假設div外部div是300px寬度，而包含頁面中ul列表的每個div可以具有不同的寬度，這取決於構成它的li元素的數量。角度在不同的列表上設置不同的ID

我在一個角度指令內建立了帶有可滾動列表的div。在同一個指令中，我想設置這些包含UL元素的單獨div的寬度。

這是我的代碼直到現在......

mainApp.directive('mimiInfoline', function(){ 

    function link(scope, element, attrs, $index) { 
    // let's count how many elements in the list we got. Luckily Angular give us the scope in the directive 
    var numOfSingleLineElm = 0; 
    for(var singleLineElement in scope.csi) { 
     numOfSingleLineElm++; 
    } 
    var tempSecWidth = 200 * numOfSingleLineElm; 
    element.find('#my-list').css('width',tempSecWidth + "px"); 
    element.attr('id','myelmnum' + scope.index); 
    var requestElement = '#' + element.attr('id'); 
    new IScroll(requestElement, { scrollX: true, scrollY: false, mouseWheel: true }); 
    } 
    return { 
    restrict: 'A', 
    replace: true, 
    scope: { 
     index: '=', 
     csi: '=' 
    }, 
    templateUrl: 'views/mimi-custom-list.html', 
    link: link 
    }; 
});

，這是一個HTML

<div class="log-widget-list"> 
    <div id="my-list"> 
    <ul class="list clearfix"> 
     <li class="pull-left" ng-repeat="linfo in csi.linesInfo | orderBy: 'linfo.specDesc'"> 
     <h4 class="align-center">{{linfo.shortCode}}</h4> 
     <div class="clearfix"> 
      <span class="icon-clock pull-left"></span> 
      <span class="pull-right"> {{linfo.specDesc}}min</span> 
     </div> 
     </li> 
    </ul> 
    </div> 
</div>

我的問題是，我得到正是我需要的元素數量與每個UL元素內需要的列表元素的數量完全相同。但是，如果第一個UL元素有2個li元素，我會期望400個px寬度fr圍繞着UL（＃my-list），而如果第二個UL元素有7個li元素，我會期望1400px的寬度DIV（＃我的列表）。相反，在指令構造結束時，我將div＃my-list的寬度設置爲1400px，就好像第一個div元素（＃my-list）的css屬性被第二個div元素覆蓋。

有沒有辦法糾正這種行爲？

編輯：

這是修改，如果我想嘗試做一個唯一的標識符周圍UL的DIV：

element.find('#my-list').addClass('linenum' + scope.index).css('width',tempSecWidth + "px");

我仍然得到同樣的行爲..

來源

2014-06-30 Ivan_nn2

您可以通過將它們傳遞給$ scope來給出不同的ID，或者在所有UIU上使用ng-repeat並使用track-by獲取索引。此外，你應該改變這一行：

element.find('#my-list').css('width',tempSecWidth + "px");

因爲它選擇的所有列表和調整自己的CSS。你需要做點像

...find('#' + $scope.passedId)...

來源

2014-06-30 09:28:11

我不知道我理解你的建議。我的錯......我需要更清楚的解釋。無論如何，關於最後一點，我的問題是：由於angular指令中的元素明確指向正在構建的動態html，因此elment.find應該引用該單個元素中的div，而不是指向所有div的所有div以前建成的元素。事實上，如果我動態地添加另一個獨特的類到ul中的指令，並修改寬度爲單個元素，我仍然有同樣的問題.. –

我編輯了問題 –

角度在不同的列表上設置不同的ID

回答

相關問題