Angular 数据绑定到多个 bootstrap 面板

Question

我需要扩展这个工作示例以包含多个面板，每个面板都显示自己的数据集。

我目前有两个独立的控制器，并将每个面板绑定到每个控制器，每个控制器都包含自己的数据集。但是，面板的数量需要是动态的，并根据数据馈送的内容进行构建。

显然，我真的不想构建一个单独的控制器。创建单个数据模型然后将过滤后的结果集绑定到每个面板更有意义，例如基于 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

Answer 1

创建一个将成为面板的指令并将项目传递给该指令。属于面板的每个 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。

Angular 数据绑定到多个 bootstrap 面板

Angular data bound to multiple bootstrap panels

angularjs

twitter-bootstrap-3