web-dev-qa-db-ja.com

AngularJSでパーシャルをロードするリストとグリッドビューのトグルスイッチコントロールを作成するにはどうすればよいですか?

私はAngularJSを初めて使用し、2つの異なるHTMLパーシャルをロードするリストとグリッドビュートグルスイッチボタンの特定のチュートリアルを見つけることができませんでした。公式を読むng-includeng-switch公式ドキュメントと検索SO。残念ながら、 I-router は使用しません。

2つのパーシャルでロードしています(list.htmlおよびgrid.html)正しいAngularこれをコーディングする方法は?

grid viewlist view

私が見つけた最も関連性のあるヘルプは次のとおりです。

1 . http://tutorialzine.com/2013/08/learn-angularjs-5-examples (例#5)

例5に洞察に満ちたコメントがありました

素敵な簡単な例-よくできました。グリッドビューとリストビューを切り替える最後の例は、オプションを作成し、オプションを表示/非表示にするため、あまり効率的ではありません。より単純でより良いアプローチは、リピーターとng-switchを備えた単一のulを使用し、次にng-switch-caseを使用して代替リスト要素を有効にすることです。 -ヨハン

2 . http://www.Adobe.com/devnet/html5/articles/getting-started-with-angularjs.html

3 . angularjsの複数の部分ビューに対して単一のhtmlビューを作成します

4 . 条件付きng-angularjsに含める


私のHTMLコード

 <div class="col-xs-6" ng-controller="ToggleDisplayCtrl">
    <div class="btn-group select-format-container" ng-switch on="selected">
      <button ng-switch-when="true" ng-click="toggleGrid()" type="button" class="btn btn-primary" ng-model="formatChoice" ng-disabled="">grid</button>
      <button ng-switch-when="false" ng-click="toggleList()" type="button" class="btn btn-primary" ng-model="formatChoice" ng-disabled="">list</button>
    </div>

    <div ng-include src="formatChoice.url" scope="" onload=""></div>

  </div><!-- col-xs-6  END ToggleDisplayCtrl-->

私のディレクティブコード

'use strict';

 var app = angular.module('tempApp');

 app.controller('ToggleDisplayCtrl', function($scope) {
  $scope.formatChoices =
  [ { name: 'grid', url: 'partials/grid.html'},
    { name: 'list', url: 'partials/list.html'} ];

$scope.selected = true;
$scope.toggleGrid = function() {
  if(selected) {
    return "partials/grid.html";
  }
  return "main.html";
};
$scope.toggleList = function() {
  if(selected) {
    return "partials/list.html";
  }
  return "main.html";

};
});
8
Danger14

ng-includeのテンプレートのURLを保持するアプリケーションコントローラーのスコーププロパティを定義し、このプロパティをディレクティブのスコープにバインドする必要があります。ディレクティブのスコープを変更する際の副作用を回避するために、ディレクティブでは必ず分離スコープを使用してください。これを行う例を次に示します(コードのコメントを参照)。

JavaScript

angular.module('app',['ngRoute']).
  config(['$routeProvider', function($routeProvider){
    $routeProvider.
      when('/main', {
        controller: 'appController',
        templateUrl: 'main.html'
      }).
      otherwise({
        redirectTo: '/main'
      });
  }]).
  controller('appController', ['$scope', function($scope){
    $scope.view = 'list.html'; // <- default template used for ng-include
    $scope.data = [{
      text: '1'
    }, {
      text: '2'
    }, {
      text: '3'
    }, {
      text: '4'
    }, {
      text: '5'
    }, {
      text: '6'
    }];
  }]).
  directive('appView', function() {
    return {
      scope: {
        view: '=appView' // <= link view property of directive's scope to some property in the parent scope (scope of appController) specified in app-view attribute of root element of directive
      },
      replace: true,
      template: '<nav class="navbar navbar-default">' +
                    '<div class="container">' +
                      '<ul class="nav navbar-nav navbar-right">' +
                        '<li ng-repeat="v in views" ng-bind="v.name" ng-class="v.icon" ng-click="switchView(v)"></li>' +
                      '</ul>' +
                    '</div>' +
                '</nav>',
      link: function(scope, el, attr) {
        scope.views = [{
          name: 'List',
          template: 'list.html',
          icon: 'btn btn-default navbar-btn glyphicon glyphicon-th-list'
        }, {
          name: 'Grid',
          template: 'grid.html',
          icon: 'btn btn-default navbar-btn glyphicon glyphicon-th'
        }];
      },
      controller: ['$scope', function($scope){
        $scope.switchView = function(view) {
          $scope.view = view.template; // <- modify parent scope view
        }
      }]
    }
  });

アプリケーションのメインページ(index.html)

<html ng-app="app">
  ...
  <body ng-view=""></body>
</html>

ルートテンプレート(main.html)

<header app-view="view"></header>
<section ng-include="view"></section>

リストビューテンプレート(list.html)

<div class="container">
  <div class="row">
    <div class="col-md-12 col-sm-12 panel panel-default" ng-repeat="item in data">
      <div class="panel-body">{{item.text}}</div>
    </div>
  </div>
</div>

グリッドビューテンプレート(grid.html)

<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-6 panel panel-default" ng-repeat="item in data">
      <div class="panel-body">{{item.text}}</div>
    </div>
  </div>
</div>

プランカー: http://plnkr.co/edit/uWw7NuPG0I161mHXZg2r?p=preview

ボーナス:グリッドはレスポンシブです。ウィンドウサイズで少し遊んでください

別のオプション:

お気づきかもしれませんが、grid.htmllist.htmlは非常に似ているため、これら2つのオプションしかない場合は、ng-includeを個別の切り替え可能なビューで使用せず、コンテンツを配置することを決定できます。ルートのテンプレートを直接表示し、ビューが変更されたときにクラスを切り替えることができるng-classディレクティブを使用して、パネルで使用されるクラスを切り替えるだけです。

ルートテンプレート(main.html)

<header app-view="view"></header>
<section>
  <div class="container">
    <div class="row">
      <div ng-class="{'col-md-4': view === 'grid.html', 'col-md-12': view === 'list.html', 'panel':true, 'panel-default':true}" ng-repeat="item in data">
        <div class="panel-body">{{item.text}}</div>
      </div>
    </div>
  </div>
</section>
5
Vadim

簡単に機能するJSBinは次のとおりです。 http://jsbin.com/jomiquqi/1/edit

_ng-include_ディレクティブは、テンプレートに含める変数を取ります。したがって、コードを更新して機能させるには、toggleGrid()メソッドが何かを返すのではなく、私の例のように_ng-include_に渡すスコープに変数を設定する必要があります。

3
Anders Ekdahl

基本的にあなたがする必要があるのは、リストビューとグリッドを同じページに同時に配置し、一度に1つずつ表示し、スイッチボタンでそれらを切り替える(cssクラスを変更する)ことです。ここで例5について説明します。

スコープ内の最初のレイアウト変数

$scope.layout = 'grid';

こちらがスイッチボタンです

<!-- On click change "$scope.layout = list" and if layout=='list' add class 'active' to self-->
<a href="#" class="list-icon" ng-class="{active: layout == 'list'}" ng-click="layout = 'list'"></a>

<!-- On click change "$scope.layout = grid" and if layout=='grid' add class 'active' to self-->
<a href="#" class="grid-icon" ng-class="{active: layout == 'grid'}" ng-click="layout = 'grid'"></a>

これらはグリッドブロックとリストブロックです。

<!-- Layout=='grid' if layout parameter is grid than show this block -->
<ul ng-show="layout == 'grid'" class="grid">...</ul>

<!-- Layout=='list' if layout parameter is list than show this block -->
<ul ng-show="layout == 'list'" class="list">...</ul>

リストとグリッドレイアウトを作成するCSS

/*-------------------------
    List layout
--------------------------*/


ul.list{
    list-style: none;
    width: 500px;
    margin: 0 auto;
    text-align: left;
}

ul.list li{
    border-bottom: 1px solid #ddd;
    padding: 10px;
    overflow: hidden;
}

ul.list li img{
    width:120px;
    height:120px;
    float:left;
    border:none;
}

ul.list li p{
    margin-left: 135px;
    font-weight: bold;
    color:#6e7a7f;
}


/*-------------------------
    Grid layout
--------------------------*/


ul.grid{
    list-style: none;
    width: 570px;
    margin: 0 auto;
    text-align: left;
}

ul.grid li{
    padding: 2px;
    float:left;
}

ul.grid li img{
    width:280px;
    height:280px;
    display:block;
    border:none;
}
2
Ali Karaca

リストとグリッドビューを表示するためのトグルアクションの理解を深めるには: このリンクをたどってください そしてこれがお役に立てば幸いです。

これを実験している場合は、これでJqueryを使用しました。これを配置してください:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

1
shaikdev305

これを行う最も簡単な方法は次のとおりです。

<div class = "bar">
  <h1>Contacts</h1>
    <a href="#" class="list-icon" ng-class="{active: layout == 'list'}" ng-click="layout = 'list'"></a>
    <a href="#" class="grid-icon" ng-class="{active: layout == 'grid'}" ng-click="layout = 'grid'"></a>
</div>
<div ng-show="layout == 'list'" class="list">
//Add your list page here
<div ng-show="layout == 'grid'" class="grid">
//Add your grid page here

CSS:

/*
 Contacts bar with toggle switches
*/
.bar{
    background-color: #5c9bb7;
  background-size: 100% 100%;
box-shadow: 0 1px 1px #ccc;
border-radius: 2px;
height: 100px;
padding: 10px;
position: relative;
text-align: right;
line-height: 1;
}

.bar a{
background:#4987a1 center center no-repeat;
width:32px;
height:32px;
display:inline-block;
text-decoration:none !important;
margin-right:5px;
border-radius:2px;
}

.bar a.active{
background-color:#c14694;
}

.bar a.list-icon{
background-                    image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkYzNkFCQ0ZBMTBCRTExRTM5NDk4RDFEM0E5RkQ1NEZCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkYzNkFCQ0ZCMTBCRTExRTM5NDk4RDFEM0E5RkQ1NEZCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RjM2QUJDRjgxMEJFMTFFMzk0OThEMUQzQTlGRDU0RkIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjM2QUJDRjkxMEJFMTFFMzk0OThEMUQzQTlGRDU0RkIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7h1bLqAAAAWUlEQVR42mL8////BwYGBn4GCACxBRlIAIxAA/4jaXoPEkMyjJ+A/g9MDJQBRhYg8RFqMwg8RJIUINYLFDmBUi+ADQAF1n8ofk9yIAy6WPg4GgtDMRYAAgwAdLYwLAoIwPgAAAAASUVORK5CYII=);
}

.bar a.grid-icon{
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjBEQkMyQzE0MTBCRjExRTNBMDlGRTYyOTlBNDdCN0I4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjBEQkMyQzE1MTBCRjExRTNBMDlGRTYyOTlBNDdCN0I4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MERCQzJDMTIxMEJGMTFFM0EwOUZFNjI5OUE0N0I3QjgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MERCQzJDMTMxMEJGMTFFM0EwOUZFNjI5OUE0N0I3QjgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4MjPshAAAAXklEQVR42mL4////h/8I8B6IGaCYKHFGEMnAwCDIAAHvgZgRyiZKnImBQsACxB+hNoDAQyQ5osQZIT4gH1DsBZABH6AB8x/JaQzEig++WPiII7Rxio/GwmCIBYAAAwAwVIzMp1R0aQAAAABJRU5ErkJggg==);
}

/*-------------------------
List layout
--------------------------*/


ul.list{
list-style: none;
width: 500px;
margin: 0 auto;
text-align: left;
}

ul.list li{
border-bottom: 1px solid #ddd;
padding: 10px;
overflow: hidden;
}

ul.list li img{
width:120px;
height:120px;
float:left;
border:none;
}

ul.list li p{
margin-left: 135px;
font-weight: bold;
color:#6e7a7f;
}


/*-------------------------
Grid layout
--------------------------*/


ul.grid{
list-style: none;
width: 570px;
margin: 0 auto;
text-align: left;
}

ul.grid li{
padding: 2px;
float:left;
}

ul.grid li img{
width:280px;
height:280px;
display:block;
border:none;
}
1
Murphy