Угловые JS: множественные привязки данных к таблице

Хорошо. Я собираю таблицу данных, которая будет просматривать майоры и несовершеннолетние школы. У меня возникают проблемы с попыткой не повторять себя в данных, где все возможно, но я не уверен, как получить данные, вложенные в документ, или даже как настроить данные в разные массивы. Ищете какие-то советы и помощь в любой из этих двух областей, которые я могу найти. Когда я просматриваю документы и API, ни один из них, похоже, не проникает достаточно глубоко в данные, чтобы действительно получить то, что я ищу.Угловые JS: множественные привязки данных к таблице

Я сделал плункер, чтобы продемонстрировать свою проблему более четко или, по крайней мере, я надеюсь сделать ее более ясными.
http://plnkr.co/edit/2pDmQKKwjO6KVullgMm5?p=preview

EDIT:

Было бы даже хорошо со мной, если степень каждой степени может быть прочитана как логическое значение, и то же самое с уровнем образования. Я просто не знаю, как это сделать, не повторяя всю строку в новой строке таблицы. 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; 
});

источник

2014-12-30 David J. Davis

Вы можете изменить структуру данных, или это должно быть оставлено то же самое? –

@WayneEllery Мы можем изменить его, его не передают никакие другие документы, но позже он может быть передан через JSON. –

Это, кажется, вопрос о моделировании данных. Я сделал несколько предположений:

Отдел может предложить несколько майоров
Отдел имеет веб-сайт
Каждая крупная может предложить один ко многим образований (то есть образование, On/Off Campus, Degree)
отдел может предложить несколько несовершеннолетних с той же структурой данных, как майоров

Я моделируемых набор «перечислений» и программ/департаментов после ваших данных. Я использовал перечисления для простоты обновления значений в нескольких местах:

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, которая использует эти данные Программы для создания ViewModels (быть связанным размах в контроллерах). Здесь вы можете создать свой оригинальный стол, или вы можете создать матрицу (например, на сайте Клемсонского):

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

Вашего контроллер может просто вызывать методы обслуживания майоров, чтобы связать ViewModel с $ объема:

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. Данные программ можно манипулировать для достижения желаемого ViewModel через службу майоров (и услуги несовершеннолетних, если вы решите написать отдельный).

Обновлено Plunkr

источник

2014-12-30 17:05:22 Patrick

Я рассмотрю это решение. Большое спасибо за вашу помощь. Я не очень хорошо знаком с услугами или фабриками, но у вас было отличное объяснение каждого. После того, как я быстро выполнил это при чтении некоторых документов на угловом сайте, я дам ему галочку. –

Любопытно, как это технически работает, обе фабрики просто возвращают данные в службу, поэтому контроллер просто используется для просмотра? –

Factory возвращает данные, которые будут использоваться сервисом (на данный момент заводские жестко закодированные программы могут переключаться на использование $ http, пока структура данных остается неизменной для службы Majors). Служба Majors предоставляет методы для преобразования этих данных в ViewModel, который будет использоваться контроллером. Логика контроллера остается простой (как она должна) и устанавливает ViewModel, возвращенный из службы, в область $, которая будет использоваться в представлении/шаблоне. – Patrick

Угловые JS: множественные привязки данных к таблице

ответ

Смежные вопросы