如何使一个列表和网格视图切换开关控制的负载在AngularJS谐音？ [英] How to make a list and grid view toggle switch control that loads in partials in AngularJS?

查看：156
本文介绍了如何使一个列表和网格视图切换开关控制的负载在AngularJS谐音？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是新来AngularJS，我一直无法找到一个列表和网格视图切换开关按钮的具体教程负荷在两个不同的HTML谐音。阅读官方 NG-包括， NG-开关官方文档和搜查。不幸的是，我们不希望使用 UI路由器。

时的装载两分音（ list.html 和 grid.html ）的编码这个正确的方式角？


最相关的帮助，我发现有这些：

1 <一href=\"http://tutorialzine.com/2013/08/learn-angularjs-5-examples\">http://tutorialzine.com/2013/08/learn-angularjs-5-examples （示例＃5）

有是在举例＃5

有见地的评论

  

尼斯简单的例子 - 做得很好。
  该网格和列表视图之间切换的最后一个例子是不是很
  有效的，因为它创建两个选项和显示/隐藏之一。一个
  简单/更好的办法是使用带有中继器的单一UL和
  NG-开关，然后使使用备用列表元素
  NG-的switch-case。 - 约翰·


2 <一个href=\"http://www.adobe.com/devnet/html5/articles/getting-started-with-angularjs.html\">http://www.adobe.com/devnet/html5/articles/getting-started-with-angularjs.html

3 <一个href=\"http://stackoverflow.com/questions/12577378/create-a-single-html-view-for-multiple-partial-views-in-angularjs/12584774#12584774\">create在angularjs

多个部分景色单一HTML视图

4。条件NG-包括angularjs

我的HTML code 

 ＆LT; D​​IV CLASS =COL-XS-6NG控制器=ToggleDisplayCtrl＆GT;
    ＆LT; D​​IV CLASS =BTN-组中选择格式容器关于=选择＆GT NG-开关;
      ＆LT;按钮NG-开关时=真正的NG点击=toggleGrid（）类型=按钮级=BTN BTN-主要NG-模式=formatChoiceNG残疾=＆GT;电网＆LT ; /按钮＆GT;
      ＆LT;按钮NG-开关时=false的NG-点击=toggleList（）类型=按钮级=BTN BTN-主要NG-模式=formatChoiceNG残疾=＆GT;清单＆LT ; /按钮＆GT;
    ＆LT; / DIV＆GT;    ＆LT; D​​IV NG-包括SRC =formatChoice.url范围=的onload =＆GT;＆LT; / DIV＆GT;  ＆LT; / DIV＆GT;＆LT;！ -  COL-XS-6月底，ToggleDisplayCtrl  - ＆GT;

我的指令，code 

 使用严格的; VAR应用= angular.module（'tempApp'）; app.controller（'ToggleDisplayCtrl'，函数（$范围）{
  $ scope.formatChoices =
  [{名称：网格，网址：'谐音/ grid.html}，
    {名称：'名单，网址：'谐音/ list.html'}]$ scope.selected = TRUE;
$ scope.toggleGrid =功能（）{
  如果（选择的）{
    返回谐音/ grid.html
  }
  返回main.html中;
};
$ scope.toggleList =功能（）{
  如果（选择的）{
    返回谐音/ list.html
  }
  返回main.html中;};
}）;


解决方案

您应该定义，将举行模板的URL为应用程序控制器的作用域属性NG-包括和绑定这个属性你指令的范围。确保使用范围隔离在你的指令，以避免副作用，同时修改指令的范围。这里是做什么的（见code评论）的例子：

的JavaScript 

  angular.module（'应用'，['ngRoute']）。
  配置（['$ routeProvider'，函数（$ routeProvider）{
    $ routeProvider。
      当（'/主'，{
        控制器：'AppController的，
        templateUrl：'main.html中
      }）。
      除此以外（{
        redirectTo：/主
      }）;
  }]）。
  控制器（'AppController的'，['$范围'，函数（$范围）{
    $ scope.view ='list.html'; //＆LT;  - 用于默认模板NG-包括
    $ scope.data = [{
      文字：'1'
    }，{
      文字：'2'
    }，{
      文字：'3'
    }，{
      文字：'4'
    }，{
      文字：'5'
    }，{
      文字：'6'
    }];
  }]）。
  指令（APPVIEW'，函数（）{
    返回{
      范围： {
        观点：'= APPVIEW'//＆LT;在父范围，应用视图指令的根元素的属性指定某些属性（AppController的范围）的指令的范围=链接视图属性
      }，
      更换：真实，
      模板：'＆LT;导航类=导航栏导航栏默认＆GT;' +
                    '＆LT; D​​IV CLASS =容器＆GT;' +
                      '＆LT; UL类=NAV导航栏，导航栏导航右＆GT;' +
                        '＆LT;李NG重复=V IN意见NG绑定=v.nameNG-CLASS =v.iconNG点击=SWITCHVIEW（五）＆GT;＆LT; /李＆GT;' +
                      '＆LT; / UL＆GT;' +
                    '＆LT; / DIV＆GT;' +
                '＆LT; / NAV＆GT;，
      链接：功能（范围，EL，ATTR）{
        scope.views = [{
          名单'，
          模板：list.html'，
          图标：BTN BTN默认Navbar的BTN glyphicon glyphicon个列表
        }，{
          名称：网格，
          模板：grid.html'，
          图标：BTN BTN默认Navbar的BTN glyphicon glyphicon个'
        }];
      }，
      控制器：['$范围'，函数（$范围）{
        $ scope.switchView =功能（视图）{
          $ scope.view = view.template; //＆LT;  - 修改父范围视图
        }
      }]
    }
  }）;

适用主要页面（的index.html） 

 ＆LT; HTML NG-应用=应用程序＆GT;
  ...
  ＆LT;机身NG-视图=＆GT;＆LT; /身体GT;
＆LT; / HTML＆GT;

路由模板（main.html中） 

 ＆LT;头应用视图=查看＆GT;＆LT; /头＆GT;
＆lt;节NG-包括=查看＆GT;＆LT; /节＆gt;

列表视图模板（list.html） 

 ＆LT; D​​IV CLASS =容器＆GT;
  ＆LT; D​​IV CLASS =行＆GT;
    ＆LT; D​​IV CLASS =COL-MD-12 COL-SM-12面板面板默认的NG-重复=项目数据＆GT;
      ＆LT; D​​IV CLASS =面板体＆GT; {{item.text}}＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;

网格视图模板（grid.html） 

 ＆LT; D​​IV CLASS =容器＆GT;
  ＆LT; D​​IV CLASS =行＆GT;
    ＆LT; D​​IV CLASS =COL-MD-4 COL-SM-6面板面板默认的NG-重复=项目数据＆GT;
      ＆LT; D​​IV CLASS =面板体＆GT; {{item.text}}＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;

Plunker： http://plnkr.co/edit/uWw7NuPG0I161mHXZg2r?p=preVIEW

的奖励：网格是有求必应，只是打了一下一个窗口大小的

另一个选择：

您可能已经注意到了， grid.html 和 list.html 非常相似，所以如果你有只有这两个选项，你可以决定不使用 NG-包括与所有独立可切换的观点，但地方内容视图直接进入你的路线的模板，只需切换使用面板使用的类纳克级指令时，查看被改变它可以切换类。

路由模板（main.html中） 

 ＆LT;头应用视图=查看＆GT;＆LT; /头＆GT;
＆lt;节＆GT;
  ＆LT; D​​IV CLASS =容器＆GT;
    ＆LT; D​​IV CLASS =行＆GT;
      ＆LT; D​​IV纳克级={'COL-MD-4：观点===grid.html'，'COL-MD-12'：鉴于===list.html'，'板'：真面板默认：真正}NG重复=数据项＆GT;
        ＆LT; D​​IV CLASS =面板体＆GT; {{item.text}}＆LT; / DIV＆GT;
      ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
＆LT; /节＆gt;

I am new to AngularJS and I've been unable to find specific tutorials of a list and grid view toggle switch buttons that loads in two different HTML partials. Read official ng-include, ng-switch official docs and searched SO. Unfortunately, we don't want to use UI-router.

Is loading in two partials (list.html and grid.html) the correct Angular way of coding this?

The most relevant help I've found are these:

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

There was an insightful comment on Example #5

Nice simple examples - well done. The last example that switches between grid and list views is not very efficient since it creates both options and the shows/hides one. A simpler/better approach would be using a single ul with repeater and ng-switch and then enabling the alternate list elements using ng-switch-case. - Johan

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

3.create a single html view for multiple partial views in angularjs

4.Conditional ng-include in angularjs

My HTML code

 <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-->

My directive code

'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";

};
});

解决方案

You should define application controller's scope property that will hold URL of template for ng-include, and bind this property to your directive's scope. Make sure to use isolated scope in your directive in order to avoid side effects while modifying directive's scope. Here is an example of doing it (see comments in the code):

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
        }
      }]
    }
  });

Main page of application (index.html)

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

Route template(main.html)

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

List view template (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 view template (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>

Plunker: http://plnkr.co/edit/uWw7NuPG0I161mHXZg2r?p=preview

Bonus: grid is responsive, just play a bit with a window size

Another Option:

As you have probably noticed, grid.html and list.html are very similar, so if you have only these two options you may decide not to use ng-include with separate switchable views at all, but place content view directly into your route's template and just switch classes used in panels using ng-class directive which can switch classes when view is changed.

Route template(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>

这篇关于如何使一个列表和网格视图切换开关控制的负载在AngularJS谐音？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆