个人中心
gpt4 book ai didi

javascript - 如何制作在 AngularJS 中加载部分的列表和 GridView 切换开关控件？

转载 作者：数据小太阳 更新时间：2023-10-29 04:08:07 25 4
gpt4 key购买 nike

我是 AngularJS 的新手，我一直无法找到在两个不同的 HTML 部分中加载的列表和 GridView 切换按钮的具体教程。阅读官方ng-include、ng-switch官方文档，搜索SO。不幸的是，我们不想使用 UI-router .

加载两个部分(list.html 和 grid.html)是否是正确的 Angular 编码方式？

grid view

list view

我找到的最相关的帮助是:

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

对示例 #5 有一个有见地的评论:

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

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

3.https://stackoverflow.com/questions/12577378/create-a-single-html-view-for-multiple-partial-views-in-angularjs/12584774#12584774

4.https://stackoverflow.com/questions/15974086/conditional-ng-include-in-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-->

我的 JS 代码:

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

最佳答案

您应该定义应用程序 Controller 的范围属性，该属性将保存 ng-include 模板的 URL，并将此属性绑定(bind)到指令的范围。确保在指令中使用隔离范围，以避免在修改指令范围时产生副作用。这是一个这样做的例子(见代码中的注释):

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: {
        // 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
        view: '=appView'
      },
      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>

ListView 模板 (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>

GridView 模板 (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.html 和 list.html 非常相似，因此如果您只有这两个选项，您可能会决定不使用 ng-include 完全具有单独的可切换 View ，但将内容 View 直接放入路由模板中，只需使用 ng-class 指令切换面板中使用的类，该指令可以在 View 出现时切换类改变了。

路线模板(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>

关于javascript - 如何制作在 AngularJS 中加载部分的列表和 GridView 切换开关控件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22448143/

25 4 0
文章推荐： c# - 将 setter 添加到派生接口(interface)
文章推荐： c# - Resharper:可能对标有 notnull 属性的实体进行空分配
文章推荐： c# - 为什么在实现 CompareTo 时必须重载运算符？
文章推荐： c# - 为什么是 float.Epsilon 而不是零？
数据小太阳
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com