Question

我正在创建一个简单的角度应用程序，您可以在其中输入一些教育结果，然后我想将该限定条件添加到列表中，类似于简单的待办事项列表。

我现在正在创造一个小提琴：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'}
    ];
  }

Answer 1

我已为您更新了小提琴here

将选定属性添加到Array对象是一种不太好的做法。如果你看到这个样本，我们有一个名为“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>

Answer 2

我不同意Karthik的方法，因为它可以简化，并且ng-repeat加载资格在提供的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>

AngularJS添加资格认证应用程序，类似于toDo应用程序

2 个答案: