將角度數據綁定到多個自舉面板

我需要擴展此工作示例以包含多個面板，每個面板都顯示各自的數據集。將角度數據綁定到多個自舉面板

我目前有兩個獨立的控制器，並將每個面板綁定到每個控制器，每個控制器都包含它們自己的單獨數據集。但是，面板的數量需要是動態的，並基於數據饋送的內容進行構建。

顯然，我並不是真的想要建立一個單獨的控制器。創建單個數據模型然後將過濾結果集綁定到每個面板是更有意義的，例如， flittered和約束基礎上，panel_id:

$scope.items = [ 
    { 
     title: 'Header - 1', 
     content: 'Panel 2-Dynamic Group Body - 1', 
     panel_id: '1' 
    }, 
    { 
     title: ' Header - 2', 
     content: 'Panel 2-Dynamic Group Body - 2', 
     panel_id: '2' 
    }, 
    { 
     title: ' Header - 3', 
     content: 'Panel 2-Dynamic Group Body - 3', 
     panel_id: '3' 
    } 
    ];

HTML代碼：

<!doctype html> 
<html ng-app="ui.bootstrap.demo"> 
<head> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script> 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script> 
    <script src="app.js"></script> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="style.css" rel="stylesheet"/> 
</head> 
<body> 

<!-- Panel 1 --> 

<div ng-controller="showhideCtrl_1"> 
    <div class="panel panel-default"> 
    <!-- Default panel contents --> 
    <div class="panel-heading">Panel 1 heading</div> 
    <button class="btn btn-default " ng-show="hidevar" ng-click="hidevar=false">Back</button> 
    <!-- List group --> 
    <ul class="list-group" ng-hide="hidevar"> 
     <li class="list-group-item" ng-repeat="item in items" ng-click="showdes(item)"><a>{{item.title}}</a></li> 
    </ul> 
    <div class="panel-body" ng-show="hidevar"> 
     {{itemdesc.content}} 
    </div> 
    </div> 
</div> 

<!-- Panel 2 --> 

<div ng-controller="showhideCtrl_2"> 
    <div class="panel panel-default"> 
    <!-- Default panel contents --> 
    <div class="panel-heading">Panel 2 heading</div> 
    <button class="btn btn-default " ng-show="hidevar" ng-click="hidevar=false">Back</button> 
    <!-- List group --> 
    <ul class="list-group" ng-hide="hidevar"> 
     <li class="list-group-item" ng-repeat="item in items" ng-click="showdes(item)"><a>{{item.title}}</a></li> 
    </ul> 
    <div class="panel-body" ng-show="hidevar"> 
     {{itemdesc.content}} 
    </div> 
    </div> 
</div> 
</body> 
</html>

這裏的javascript代碼

angular.module('ui.bootstrap.demo', ['ui.bootstrap']); 
angular.module('ui.bootstrap.demo').controller('showhideCtrl_1', function ($scope) { 

    $scope.items = [ 
    { 
     title: 'Header - 1', 
     content: 'Panel 1-Dynamic Group Body - 1' 
    }, 
    { 
     title: ' Header - 2', 
     content: 'Panel 1-Dynamic Group Body - 2' 
    }, 
    { 
     title: ' Header - 3', 
     content: 'Panel 1-Dynamic Group Body - 3' 
    } 
    ]; 

    $scope.showdes = function(item){ 

    $scope.itemdesc=item; 
    $scope.hidevar=true; 
    } 


}); 

angular.module('ui.bootstrap.demo').controller('showhideCtrl_2', function ($scope) { 

    $scope.items = [ 
    { 
     title: 'Header - 1', 
     content: 'Panel 2-Dynamic Group Body - 1' 
    }, 
    { 
     title: ' Header - 2', 
     content: 'Panel 2-Dynamic Group Body - 2' 
    }, 
    { 
     title: ' Header - 3', 
     content: 'Panel 2-Dynamic Group Body - 3' 
    } 
    ]; 

    $scope.showdes = function(item){ 

    $scope.itemdesc=item; 
    $scope.hidevar=true; 
    } 


});

這裏是我到目前爲止工作的例子：

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

來源

2015-04-02 user1513388

制定一個指令，它將成爲一個面板並通過該指令的項目。屬於面板上的每個HTML會去它的模板：

angular.module('ui.bootstrap.demo').directive('showHide', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     items : '=', 
     index: '=' 
    }, 
    template: '<div class="panel panel-default">\ 
     <!-- Default panel contents -->\ 
     <div class="panel-heading">Panel {{index}} heading</div><button class="btn btn-default " ng-show="hidevar" ng-click= "hidevar=false">Back</button>\ 
     <!-- List group -->\ 
     <ul class="list-group" ng-hide="hidevar" >\ 
      <li class="list-group-item" ng-repeat="item in items" ng-click="showdes(item)"><a>{{item.title}}</a> </li>\ 
     </ul>\ 
     <div class="panel-body" ng-show="hidevar">\ 
      {{itemdesc.content}}\ 
     </div>\ 
     </div>', 
    link: function(scope, elm, attr) { 
     scope.showdes = function(item){  
      scope.itemdesc=item; 
      scope.hidevar=true; 
     } 
    } 
    }; 
});

然後你就可以擁有的項目清單列表中選擇控制器：

angular.module('ui.bootstrap.demo').controller('main', function ($scope) { 

$scope.itemsList = [[ 
    { 
     title: 'Header - 1', 
     content: 'Panel 1-Dynamic Group Body - 1' 
    }, 
    { 
     title: ' Header - 2', 
     content: 'Panel 1-Dynamic Group Body - 2' 
    }, 
    { 
     title: ' Header - 3', 
     content: 'Panel 1-Dynamic Group Body - 3' 
    } 
    ],[ 
    { 
     title: 'Header - 1', 
     content: 'Panel 2-Dynamic Group Body - 1' 
    }, 
    { 
     title: ' Header - 2', 
     content: 'Panel 2-Dynamic Group Body - 2' 
    }, 
    { 
     title: ' Header - 3', 
     content: 'Panel 2-Dynamic Group Body - 3' 
    } 
    ]]; 


});

而在你的HTML把ngRepeat動態創建每個列表的指令可用：

<div ng-repeat="list in itemsList"> 
    <show-hide items="list" index="$index + 1"></show-hide> 
</div>

看到這個plunker。

來源

2015-04-02 08:18:02 eladcon

非常完美，非常感謝您的支持。奇蹟般有效。 – user1513388 2015-04-02 08:54:24

嗨我需要更新我的數據模型，以便它包含我的面板標題的名稱，因爲這些數據將被動態生成。我在這裏創建了一個新的Plunker，它顯示：http://plnkr.co/edit/XbX0hF8gFzolTdKF3qxp?p=preview。但是，我現在還無法弄清楚如何將它綁定到面板上。 – user1513388 2015-04-02 17:31:23

您只需要將ng重複更改爲在itemsList.store中列出。檢查此http://plnkr.co/edit/jPMzuEPe3rHHwJmowWZM?p=preview – eladcon 2015-04-02 17:38:42

將角度數據綁定到多個自舉面板

回答

相關問題