个人中心
gpt4 book ai didi

javascript - Angular JS : Multiple Data Bindings Into Table

转载 作者：行者123 更新时间：2023-11-28 00:43:12 25 4
gpt4 key购买 nike

好的。我正在整理一个数据表，用于查看学校的专业和辅修专业。我遇到了尽可能不在数据中重复自己的问题，但不确定如何将数据提取到文档中，甚至不确定如何将数据设置到不同的数组中。在我能找到的这两个领域中寻求一些建议和帮助。当我搜索文档和 API 时，似乎没有一个对数据足够深入，无法真正实现我想要完成的任务。

我做了一个 plunker 来更清楚地展示我的问题，或者至少我希望让它更清楚。
http://plnkr.co/edit/2pDmQKKwjO6KVullgMm5?p=preview

编辑:

如果每个学位的学位都可以解读为 bool 值，并且与教育水平相同，那对我来说甚至没问题。我只是不确定如何在不重复新表行中的整行的情况下进行操作。 http://www.clemson.edu/majors

<小时/>

这是 HTML

<body ng-app="app">
    <h2> Majors and Minors </h2>
    <table ng-controller="MajorsCtrl">
      <tbody>
        <tr>
          <th>Department</th>
          <th>Major</th>
          <th>Education Level</th>
          <th>Location </th>
          <th>Degree</th>
          <th>Department Website </th>
        </tr>
        <tr ng-repeat="major in majors">
          <td>{{major.Department}}</td>
          <td>{{major.Major}}</td>
          <td>{{major.EdLevel}}</td>
          <td>{{major.Type}}</td>
          <td>{{major.Degree}}</td>
          <td>{{major.Website}}</td>
        </tr>
      </tbody>
    </table>
  </body>
<小时/>

这是 JS

var app = angular.module('app', []);

// Majors and Minors Data That will be injected into Tables 
app.controller('MajorsCtrl', function($scope) {
   // Heres where it gets tricky 
        // Now I have biology with four diff degree types
        // Biology with 2 diff EdLevels
        // How do I combine all of these into 1 Group without repeating

    var majorsInfo =  [
       { 
            Department:'Statistics', 
            Major:'Applied Statitistics', 
            EdLevel:'Graduate', 
            Type:'Campus/Online',
            Degree:'Graduate Certificate',
            Website: 'http://biology.wvu.edu',
        }, 
        { 
            Department:'Biology', 
            Major:'Biology', 
            EdLevel:'Graduate', 
            Type:'Campus',
            Degree:'PH.D' ,
            Website: 'http://biology.wvu.edu',
        }, 
         { 
            Department:'Biology', 
            Major:'Biology', 
            EdLevel:'Graduate', 
            Type:'Campus',
            Degree:'M.S' ,
            Website: 'http://biology.wvu.edu',
        }, 
         { 
            Department:'Biology', 
            Major:'Biology', 
            EdLevel:'Undergraduate', 
            Type:'Campus',
            Degree:'B.A.' ,
            Website: 'http://biology.wvu.edu',
        }, 
         { 
            Department:'Biology', 
            Major:'Biology', 
            EdLevel:'Undergraduate', 
            Type:'Campus',
            Degree:'B.S.' ,
            Website: 'http://biology.wvu.edu',
        }, 
      ]; 


    $scope.majors = majorsInfo; 
});

最佳答案

这似乎是一个关于数据建模的问题。我做了一些假设:

  • 一个院系可以开设多个专业
  • 一个部门有一个网站
  • 每个专业可以提供一种到多种教育(即教育水平、校内/校外、学位)
  • 该系可以提供多个辅修类(class)，其数据结构与主修类(class)相同

我根据您的数据建模了一组“枚举”和程序/部门。我使用枚举来轻松更新多个位置的值:

app.factory("EducationEnums", function () {
  var EdLevels = {
    GRAD: "Graduate",
    UGRAD: "Undergraduate"
  };
  var Types = {
    CAMPUS: "Campus",
    ONLINE: "Online",
    HYBRID: "Campus/Online"
  };
  var Degrees = {
    PHD: "PH.D",
    MS: "M.S.",
    BS: "B.S.",
    BA: "B.A.",
    GCERT: "Graduate Certificate"
  };

  return {
    EdLevels: EdLevels,
    Types: Types,
    Degrees: Degrees
  }
});

app.factory("Programs", function (EducationEnums) {
  var EdLevels = EducationEnums.EdLevels;
  var Types = EducationEnums.Types;
  var Degrees = EducationEnums.Degrees;

  return [
    {
      Department: "Biology",
      Website: "http://biology.wvu.edu",
      //Majors offered by department
      Majors: [{
        Major: "Biology",
        Education: [
          {
            EdLevel: EdLevels.GRAD,
            Type: Types.CAMPUS,
            Degree: Degrees.PHD
          },
          {
            EdLevel: EdLevels.GRAD,
            Type: Types.CAMPUS,
            Degree: Degrees.MS
          },
          {
            EdLevel: EdLevels.UGRAD,
            Type: Types.CAMPUS,
            Degree: Degrees.BA
          },
          {
            EdLevel: EdLevels.UGRAD,
            Type: Types.CAMPUS,
            Degree: Degrees.BS
          }
        ]
      }],
      Minors: [{
        //Minors can go here
      }]
    },
    {
      Department: "Statistics",
      Website: "http://biology.wvu.edu",
      Majors: [{
        Major: "Applied Statistics",
        Education: [
          {
            EdLevel: EdLevels.GRAD,
            Type: Types.HYBRID,
            Degree: Degrees.GCERT
          },
          {
            EdLevel: EdLevels.UGRAD,
            Type: Types.CAMPUS,
            Degree: Degrees.BS
          }
        ]
      }],
      Minors: [{
        //Minors can go here
      }]
    }
  ]
});

接下来，我创建了一个专业服务，它使用此程序数据来构建 ViewModel(绑定(bind)到 Controller 中的范围)。您可以在此处构建原始表格，也可以构建矩阵(如克莱姆森网站):

app.service("Majors", function (Programs, EducationEnums) {
  var Degrees = this.Degrees = EducationEnums.Degrees;

  //Build ViewModel for all details
  this.getMajorDetails = function () {
    var arr = [];
    var programLen;
    var majorLen;
    var eduLen;

    for (var i = 0; i < (programLen = Programs.length); ++i) {
      var p = Programs[i];
      var dept = p.Department;
      var ws = p.Website;
      var Majors = p.Majors;

      for (var j = 0 ; j < (majorLen = Majors.length); ++j) {
        var maj = Majors[j].Major;
        var edu = Majors[j].Education;

        for (var k = 0; k < (eduLen = edu.length); ++k) {
          arr.push({
            Department: dept,
            Major: maj,
            EdLevel: edu[k].EdLevel,
            Type: edu[k].Type,
            Degree: edu[k].Degree,
            Website: ws
          });
        }
      }
    }

    return arr;
  }

  //Build ViewModel for Degrees offered (similar to Clemson)
  this.getMajorMatrix = function () {
    var arr = [];
    var programLen;
    var majorLen;
    var eduLen;

    for (var i = 0; i < (programLen = Programs.length); ++i) {
      var p = Programs[i];
      var Majors = p.Majors;

      for (var j = 0; j < (majorLen = Majors.length); ++j) {
        var maj = Majors[j].Major;
        var edu = Majors[j].Education;
        var obj = {
          Major: maj
        };

        for (var k = 0; k < (eduLen = edu.length); ++k) {
          var degree = edu[k].Degree;
          if (degree === Degrees.PHD) {
            obj.PHD = true;
          }
          else if (degree === Degrees.MS) {
            obj.MS = true;
          }
          else if (degree === Degrees.BS) {
            obj.BS = true;
          }
          else if (degree === Degrees.BA) {
            obj.BA = true;
          }
        }

        arr.push(obj);
      }
    }

    return arr;
  }
});

您的 Controller 只需调用 Majors 服务方法即可将 ViewModel 绑定(bind)到 $scope:

app.controller('MajorsCtrl', function($scope, Majors) {
    $scope.majorDetails = Majors.getMajorDetails(); 
});

app.controller("MajorMatrixCtrl", function ($scope, Majors) {
  $scope.Degrees = Majors.Degrees;
  $scope.majorMatrix = Majors.getMajorMatrix();
});

这样的分离将允许您稍后更新程序工厂，使其不仅使用静态数据，还可以通过例如 $http 从服务中提取数据。可以通过 Majors 服务(以及 Minors 服务，如果您选择编写单独的服务)来操作 Programs 数据以实现您想要的 ViewModel。

已更新Plunkr

关于javascript - Angular JS : Multiple Data Bindings Into Table，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27708069/

25 4 0
文章推荐： c++ - 数组缓冲区溢出
文章推荐： html - 如何自动高度，div z 索引内容的宽度
文章推荐： C++ fstream : More signs readen than intended
文章推荐： java - CSS 在运行程序时不起作用，但在我不运行时它确实起作用
行者123
个人简介

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

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