頁面加載時角度過濾器和開口手風琴的問題

由於添加角度過濾器，手風琴在頁面加載時不會打開。我想這是代碼is-open="group.isOpen"和group在那個實例中不再有效嗎？，導致代碼現在使用key, value？我究竟做錯了什麼？頁面加載時角度過濾器和開口手風琴的問題

問題的Here's a plunker。

**編輯：（（而且，作爲評價請求，加入角濾波器之前在頁面加載手風琴開口的here's a plunker））。

這裏的HTML：

<div ng-controller="AccordionDemoCtrl"> 
    <accordion close-others="oneAtATime"> 

     <accordion-group is-open="group.isOpen" ng-repeat="(key, value) in groups | groupBy: 'title'"> 
     <accordion-heading><i class="glyphicon-plus"></i> {{ key }} 
      <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': group.isOpen, 'glyphicon-chevron-right': !group.isOpen}"></i> 
     </accordion-heading> 
     <p ng-repeat="group in value"> {{ group.content }}</p> 
     <ul> 
     <li ng-repeat="group in value"> 

     {{ group.list }} 
     </li> 
    </ul> 

     </accordion-group> 

    </accordion> 
    </div>

這裏的JS：

angular.module('app', ['ui.bootstrap','ngSanitize','angular.filter']); 
angular.module('app').controller('AccordionDemoCtrl', function ($scope) { 
    $scope.oneAtATime = true; 

    $scope.groups = [ 
    { 
     title: 'title 1', 
     content: 'content 1', 
     isOpen: true, 
     list: 'item0a' 
    }, 
    { 
     title: 'title 2', 
     content: 'Content 2', 
     list: 'item0b' 
    }, 
    { 
     title: 'title 3', 
     content: 'Content 3', 
     list: 'item0c' 
    }, 
    { 
     title: 'title 4', 
     content: 'content 4', 
     list: 'item0d' 
    }, 
    { 
     title: 'title 5', 
     content: 'content 5', 
     list: 'item0e' 
    }, 
    { 
     title: 'title 1', 
     list: 'item1a' 
    }, 
    { 
     title: 'title 1', 
     list: 'item2a' 
    }, 
    { 
     title: 'title 1', 
     list: 'item3a' 
    }, 
    { 
     title: 'title 2', 
     list: 'item1b' 
    }, 
    { 
     title: 'title 2', 
     list: 'item2b' 
    }, 
    { 
     title: 'title 3', 
     list: 'item1c' 
    }, 
    { 
     title: 'title 3', 
     list: 'item2c' 
    },  
    { 
     title: 'title 4', 
     list: 'item1d' 
    }, 
    { 
     title: 'title 5', 
     list: 'item1e' 
    } 
    ]; 
});

來源

2015-07-03 Agent Zebra

爲了解決這個問題，我們不得不理解這種特定手風琴庫的工作方式。你之前說過一個例子，它在哪裏工作？你應該發佈。谷歌搜索引導組是開放的也告訴我，http://victorleungtw.com/angular-ui-bootstrap/，這可能工作。 – Jan

請參閱上面的修改。由於使用右側的V形圖來表示一個開放和封閉的手風琴組，我原來的工作版本有一個更常見的簡單實現的工作。 'group.isOpen'也被用來改變V形方向，所以我不確定這個例子會起作用。 –

我不知道，如果你有你的對象結構的具體原因，但像

{ 
    title: 'title 1', 
    content: 'content 1', 
    isOpen: true, 
    list: ['item1a', 
    'item2a', 
    'item3a'] 
}

對我更有意義。現在基本上不需要更改實際視圖，除了添加列表之外。

<ul> 
     <li ng-repeat="item in group.list"> 
     {{ item }} 
     </li> 
    </ul>

http://plnkr.co/edit/LBNQ2ukERMEzH3gKQ4M6?p=preview

來源

2015-07-04 00:22:00 Jan

感謝這可能是一個更好的方法來做到這一點。 –

是的，如果一個對象應該屬於另一個對象，最好通過引用或直接使它成爲該對象的子對象。然後更容易做操作（如你注意到的）。你還有與組（父母）在同一對象級別的列表項目（子對象），這也是沒有理由的。你可以將它們保存爲自己的數組（這會使它更棘手，但可以例如便於共享列表），但是它們應該仍然是控制器中的獨立屬性。 – Jan

頁面加載時角度過濾器和開口手風琴的問題

回答

相關問題