1

好的。我正在整理一个数据表，该表将查看一所学校的专业和未成年人。我遇到了尽量不在数据中重复自己的问题，但不确定如何将数据拉入文档，甚至不确定如何将数据设置到不同的数组中。在我能找到的这两个领域中的任何一个方面寻找一些建议和帮助。当我搜索文档和 API 时，它们似乎都没有深入到数据中以真正获得我想要完成的任务。

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

编辑：

如果每个学位的学位可以被解读为布尔值，我什至可以接受，并且与教育水平相同。我只是不确定如何在不重复新表格行中的整行的情况下进行操作。 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; 
});
4

1 回答 1

1

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

  • 一个部门可以提供多个专业
  • 一个部门有一个网站
  • 每个专业可以提供一对多的教育（即教育水平、校内/校外、学位）
  • 该部门可以提供与专业相同数据结构的多个未成年人

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

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

接下来，我创建了一个 Majors 服务，它使用这个 Programs 数据来构建 ViewModels（绑定到控制器中的范围）。在这里，您可以构建原始表格，也可以构建矩阵（如 Clemson 站点）：

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

您的控制器可以调用 Majors 服务方法来将 ViewModel 绑定到 $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();
});

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

更新了 Plunkr

于 2014-12-30T17:05:22.373 回答