Angular JS：將多個數據綁定到表中

好的。我正在把一張數據表拉到一起，這張表將通過一個學校的專業和未成年人來看。我遇到了一些問題，試圖不在數據中重複我自己，但不知道如何將數據拉入文檔，甚至不知道如何將數據設置到不同的數組中。尋找一些建議和幫助，無論我在哪兩個領域找到。當我通過文檔和API進行搜索時，他們中沒有一個人似乎對數據足夠深入，無法真正瞭解我期望完成的任務。Angular JS：將多個數據綁定到表中

我已經做了一個蹲點來更清楚地展示我的問題，或者至少我希望能夠更清楚地說明問題。
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; 
});

來源

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

像這樣的分離可以讓你稍後更新程序工廠，不僅僅使用靜態數據，還可以通過$ http從服務中提取實例。可以通過Majors服務操作程序數據以實現所需的ViewModel（如果您選擇單獨編寫一個服務，則可以使用Minors服務）。

更新Plunkr

來源

2014-12-30 17:05:22 Patrick

我會研究這個解決方案。非常感謝您的幫助。我現在對服務或工廠不熟悉，但你對每個服務或工廠都有很好的解釋。在我讀完角網站上的一些文檔之後，我快速實現了這個功能後，我會給它一個複選標記。 –

只是好奇這是如何在技術上的工作，兩家工廠都只是簡單地將數據返回到服務，所以控制器只是用於查看目的？ –

工廠返回服務使用的數據（現在工廠硬編碼的程序，只要數據結構對於Majors服務保持不變，就可以切換到使用$ http）。 Majors服務公開了將這些數據轉換爲ViewModel以供控制器使用的方法。控制器的邏輯保持簡單（因爲它應該）並將ViewModel從服務返回到$ scope以在視圖/模板中使用。 – Patrick

Angular JS：將多個數據綁定到表中

回答

相關問題