Question

我的ng-repeat存在问题。我正在一个项目中工作，我正在设计一个等级控制系统。我有一个表单，当用户点击按钮时，它会将$scope.grade添加到数组中。

在下表中，它应该显示数组。但它没有显示出来。

<div class="container">
    <h2>Controle de Notas:</h2>
    <form role="form">
        <div class="form-group">
            <label for="inputNameSubject"> Subject's Name</label>
            <input type="text" class="form-control" ng-model="grade.name" placeholder="Enter the name of the subject" />
            <p>{{grade.name}}</p>
        </div>
        <div class="form-group">
            <label for="inputTeacherSubject"> Teacher's Name</label>
            <input type="text" class="form-control" ng-model="grade.teacher" placeholder="Enter the name of the teacher"/>
        </div>
        <div class="form-group">
            <label for="inputScoreSubject"> Grade </label>
            <input type="text" class="form-control" ng-model="grade.score" placeholder="Enter your grade"/>
        </div>
        <button type="button" class="btn btn-primary" ng-click="pushToArray() "> Submit your score!</button>
    </form>
</div>
<br><br><br>
<div class="container">
    <table class="table">
        <th ng-repeat="head in tableHeadings"> {{head}}</th>
        <tr ng-repeat="gr in grades track by $index" ></tr>
        <td > {{gr.name}}</td>
        <td>{{gr.teacher}}</td>
        <td> {{gr.score}}</td>
    </table>
</div>

 angular.module('myProjectApp')
    .controller('MainCtrl', function($scope) {
        $scope.grade = {};
        $scope.grades = [];
        $scope.tableHeadings = ['Subject', ' Teacher', 'Grade'];

        $scope.pushToArray = function(){
            $scope.grades.push($scope.grade);
            console.log($scope.grades);
        }

    });

Answer 1

因为您关闭 tr 元素，因此 td 元素与ng-repeat的范围不同，并且无法正确打印。更不用说它也是无效的HTML。

<tr ng-repeat="gr in grades track by $index" ></tr>
    <td > {{gr.name}}</td>
    <td>{{gr.teacher}}</td>
    <td> {{gr.score}}</td>

应该是

<tr ng-repeat="gr in grades track by $index" >
    <td > {{gr.name}}</td>
    <td>{{gr.teacher}}</td>
    <td> {{gr.score}}</td>
</tr>

Answer 2

帕特里克打败了我！

＆＃13;

angular.module('myProjectApp', [])
  .controller('MainCtrl', function($scope) {
    $scope.grade = {};
    $scope.grades = [];
    $scope.tableHeadings = ['Subject', ' Teacher', 'Grade'];

    $scope.pushToArray = function() {
      $scope.grades.push($scope.grade);
      console.log(JSON.stringify($scope.grades));
    }

  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myProjectApp" ng-controller="MainCtrl">
  <div class="container">
    <h2>Controle de Notas:</h2>
    <form role="form">
      <div class="form-group">
        <label for="inputNameSubject">Subject's Name</label>
        <input type="text" class="form-control" ng-model="grade.name" placeholder="Enter the name of the subject" />
        <p>{{grade.name}}</p>
      </div>
      <div class="form-group">
        <label for="inputTeacherSubject">Teacher's Name</label>
        <input type="text" class="form-control" ng-model="grade.teacher" placeholder="Enter the name of the teacher" />
      </div>
      <div class="form-group">
        <label for="inputScoreSubject">Grade</label>
        <input type="text" class="form-control" ng-model="grade.score" placeholder="Enter your grade" />
      </div>
      <button type="button" class="btn btn-primary" ng-click="pushToArray() ">Submit your score!</button>
    </form>
  </div>
  <br>
  <br>
  <br>
  <div class="container">
    <table class="table">
      <th ng-repeat="head in tableHeadings">{{head}}</th>
      <tr ng-repeat="gr in grades">
      <td>{{gr.name}}</td>
      <td>{{gr.teacher}}</td>
      <td>{{gr.score}}</td>
        </tr>
    </table>
  </div>
</body>

＆＃13;

未显示ng-repeat中的数组

2 个答案: