2015-01-08 53 views
0

我正在創建一個簡單的角度應用,您可以在其中輸入一些教育結果,然後我想將資格添加到列表中,類似於簡單的待辦事項列表。AngularJS添加資格認證應用,類似於toDo應用

我已經創建我的時刻,一個小提琴:http://jsfiddle.net/shannabarnard/nykm5857/1/

我想現在要做的就是添加這是$ scope.ibLevel,$ scope.ibSubject和$組合資格scope.ibGrade並將其稱爲$ scope.ibQualification,這將成爲我添加到列表中的項目。任何人都可以爲我解決這個問題,或者提出一個更好的方法來解決我正在使用的問題?

function($scope) { 
    $scope.ibLevel = [ 
     {level:'Higher'}, 
     {level:'Standard'} 
    ]; 
    $scope.ibSubject = [ 
     {subject:'Biology'}, 
     {subject:'Chemistry'}, 
     {subject:'Maths'}, 
     {subject:'Further Maths'}, 
     {subject:'Human Biology'}, 
     {subject:'Physics'}, 
    ]; 
    $scope.ibGrade = [ 
     {grade:'7'}, 
     {grade:'6'}, 
     {grade:'5'} 
    ]; 
    } 
+0

不要喲希望將其添加爲一個列表? – Karthik

+0

是的,但分組,所以ibQualification將作爲一個例子,級別:更高,主題:生物學,等級:6 – Pianoc

回答

1

我已經更新了搗鼓你here

它是一種不好的做法,選定的屬性添加到一個數組對象。如果你看到這個例子,我們有一個名爲「selected」的新的作用域對象,它攜帶了選定的值。

控制器:

$scope.addibQualification = function(){ 
    var qualification = angular.copy($scope.selected); 
    $scope.selected = {}; 
} 

HTML:

<div ng-repeat="option in ibLevel" class="btn-group"> 
     <input type="radio" ng-model="selected.ibLevel" value="{{option.level}}">{{option.level}} 
    </div> 
    {{selected.ibLevel}} 

    <br class="clearfix"> 

    <span class="button-group-header">IB subject:</span> 

    <select class="form-control" ng-model="selected.ibSubject" ng-options="subject.subject for subject in ibSubject"> 
     <option value="">-- choose subject --</option> 
    </select> 
    {{selected.ibSubject}} 

    <br class="clearfix"> 

    <span class="button-group-header">Grade:</span> 

    <div class="btn-group"> 
     <div ng-repeat="option in ibGrade" class="btn-group"> 
     <input type="radio" ng-model="selected.ibGrade" value="{{option.grade}}">{{option.grade}} 
     </div> 
    </div> 
    {{selected.ibGrade}} 
    <br class="clearfix"> 

    <button class="btn btn-primary btn-block add-qual-btn" ng-click="addibQualification()">+ Add qualification</button> 

    <table cellpadding="10" cellspacing="10"> 
     <thead> 
      <th>Level</th> 
      <th>Subject</th> 
      <th>Grade</th> 
     </thead> 
     <tbody> 
     <tr ng-repeat="qualification in qualifications"> 
     <td>{{qualification.ibLevel}}</td> 
     <td>{{qualification.ibSubject.subject}}</td> 
     <td>{{qualification.ibGrade}}</td> 
     </tr> 
     </tbody> 
    </table> 
+0

非常感謝,這是非常好的! – Pianoc

+0

@ShannaBarnard歡迎您。 – Karthik

0

我不同意KARTHIK的方法,因爲它可以簡化和NG-重複加載資格不提供的jsfiddle工作。要求是能夠推動多種資格,而不僅僅是一種。

這裏是一個更簡潔,簡單的解決方案,實際工作:link

JS

function demoCtrl($scope) { 
    $scope.qualification = {}; 
    $scope.qualifications = []; 
    $scope.formSettings = { 
     levels: [ 
      'Higher', 
      'Standard' 
     ], 
     subjects: [ 
      'Biology', 
      'Chemistry', 
      'Math', 
      'Further Maths', 
      'Human Biology', 
      'Physics', 
     ], 
     grades: [ 
      '7', 
      '6', 
      '5', 
     ] 
    }; 
    $scope.addQualification = function() { 
     $scope.qualifications.push(angular.copy($scope.qualification)); 
    }; 
} 

HTML

<div ng-app> 
    <h2>Todo</h2> 

    <div ng-controller="demoCtrl"> 
    <span class="button-group-header">Level:</span> 

     <div ng-repeat="level in formSettings.levels" class="btn-group"> 
      <input type="radio" ng-model="qualification.level" value="{{level}}" />{{level}} 
     </div> 

     <br class="clearfix"> 

     <span class="button-group-header">Subject:</span> 

     <select class="form-control" ng-model="qualification.subject" ng-options="subject for subject in formSettings.subjects"> 
      <option value="">-- choose subject --</option> 
     </select> 
     {{subject}} 

     <br class="clearfix"> 

     <span class="button-group-header">Grade:</span> 

     <div class="btn-group"> 
      <div ng-repeat="grade in formSettings.grades" class="btn-group"> 
      <input type="radio" ng-model="qualification.grade" value="{{grade}}">{{grade}} 
      </div> 
     </div> 
     <br class="clearfix"> 

     <button class="btn btn-primary btn-block add-qual-btn" ng-click="addQualification()">+ Add qualification</button> 

     <ul> 
      <li ng-repeat="qualification in qualifications"> 
       <p>Level: {{qualification.level}}, Subject: {{qualification.level}}, Grade: {{qualification.grade}}</p> 
      </li> 
     </ul> 

</div> 
相關問題