각도 JS : 다중 데이터 바인딩 표에

좋아요. 저는 학교의 전공과 미성년자를 조사 할 데이터 테이블을 모으고 있습니다. 가능한 모든 데이터를 반복하지 않으려 고하지만 데이터를 문서로 가져 오는 방법을 모르거나 다른 배열에 데이터를 설정하는 방법에 대한 문제가 있습니다. 내가 알 수있는 두 가지 영역 중 어느 것이 든 조언과 도움을 찾고 있습니다. 문서 및 API를 검색 할 때 그 중 아무 것도 데이터를 충분히 끌어 들이지 못하여 실제로 내가 얻고 자하는 것을 얻지 못하는 것 같습니다.각도 JS : 다중 데이터 바인딩 표에

나는 내 문제를보다 분명하게 보여줄 플 런커를 만들었으며, 적어도 분명하게하기를 바란다.
http://plnkr.co/edit/2pDmQKKwjO6KVullgMm5?p=preview

편집 :

정도 각 정도 부울 읽고, 교육 수준과 동일 할 수 있다면 심지어 나와 함께 괜찮을 것이다. 나는 새로운 테이블 행에서 전체 라인을 반복하지 않고 어떻게 움직이는 지 모르겠습니다. http://www.clemson.edu/majors

은 여기에 HTML을 HERE

<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을 통해 전달 될 수 있습니다. –

이다. 나는 몇 가지 가정에 나섭니다 :

부서가 제공 할 수있는 여러 전공
부서는 웹 사이트가를
많은 학력 한 (즉, 교육 수준, 온/오프 캠퍼스에서 학위)를 제공 할 수있는 각 주요
부서는 전공

나는 당신의 데이터 후 "열거 형"및 프로그램/부서의 집합을 모델과 동일한 데이터 구조로 다수의 미성년자를 제공 할 수 있습니다. 내가 여러 위치의 값을 업데이트하기 쉽게 열거 형을 사용 :

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

다음으로, (컨트롤러의 범위에 바인딩 될) 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; 
    } 
});

단지 $ 범위에 뷰 모델을 결합하는 메이저 서비스 메소드를 호출 할 수 있습니다 컨트롤러 :

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

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

이렇게 Separting하면 나중에 정적 데이터를 사용하지 않고 프로그램 팩토리를 업데이트 할 수 있지만 예를 들어 $ http를 통해 서비스에서 가져올 수 있습니다. 프로그램 데이터는 메이저 서비스 (그리고 별도로 작성하려는 경우 미성년자 서비스)를 통해 원하는 ViewModel을 달성하기 위해 조작 할 수 있습니다.

업데이트 됨 Plunkr

출처

2014-12-30 17:05:22 Patrick

이 해결책을 살펴 보겠습니다. 도와 주셔서 대단히 감사합니다. 지금 당장은 서비스 나 공장에 익숙하지 않지만 각각의 훌륭한 설명이 있습니다. 각도 사이트에서 일부 문서를 읽는 동안이 작업을 빠르게 수행 한 후에 체크 표시를합니다. –

이것이 기술적으로 어떻게 작동하는지 궁금하다면 두 공장 모두 단순히 데이터를 서비스로 반환하기 만하므로 컨트롤러는보기 용도로만 사용됩니까? –

팩토리는 서비스에서 사용할 데이터를 반환합니다 (현재 공장 하드 코딩 된 프로그램은 데이터 구조가 전공 서비스와 동일하게 유지되는 한 $ http를 사용하도록 전환 할 수 있습니다). 메이저 서비스는이 데이터를 컨트롤러가 사용할 ViewModel로 변환하는 메서드를 제공합니다. 컨트롤러의 로직은 단순한 상태를 유지하며 서비스에서 반환 된 ViewModel을 뷰/템플릿 내에서 사용되는 $ scope로 설정합니다. – Patrick

각도 JS : 다중 데이터 바인딩 표에

답변

관련 문제