Question

我为我的项目制作了一个应用程序。并且基本上它向用户询问学生的姓名然后显示在桌子上。但我似乎无法查看/显示新添加的数据。

以下是用户输入的代码：

    <div layout="row">
        <ng-form role="form">
            <md-input-container>
                <label>Learners' Name</label>
                <input type="text" id="name" ng-model="New_Student">
                <span class="label label-primary">Last Name, First Name Initial</span>
            </md-input-container>

            <md-input-container style="position: relative; bottom: 12px;">
                <md-select ng-model="Gender" placeholder="Gender">
                    <md-option value="Male">Male</md-option>
                    <md-option value="Female">Female</md-option>
                </md-select>
            </md-input-container>
                <md-button class="md-raised md-primary" ng-click="addStudent()">
                    Add Student
                </md-button>
        </ng-form>
    </div>

这是显示添加数据的位置。

<div layout="row">
<table class="table table-striped table-hover">
    <thead>
        <th>Learners' Name</th>

    </thead>
    <tbody>
        <tr ng-repeat="student in studentData|orderBy:'Student_name'">
            <td>
                {{student.Student_name}}
            </td>
       </tr>
    </tbody>
</table>

JavaScript文件

.controller('homeCtrl', function($scope){
 $scope.Reset = function () {
    $scope.New_Student = '';
    }
$scope.addStudent = function(){

    $scope.studentData.push({ student_name: $scope.New_Student });
    $scope.Reset();
    console.log($scope.studentData);
}
});

HTML标记

<div layout="row" layout-padding ng-cloak class="md-inline-form" ng-
controller="homeCtrl">    
<img ng-src="{{seal1.image}}" layout-margin layout-padding style="width: 
auto;
height: 120px;" alt="DepEd Seal">
<img ng-src="{{seal2.image}}" flex-order="3" style="width: auto;
height: 120px;" alt="DepEd Logo">
<form layout-margin>
    <md-input-container flex="10">
        <label>Region</label>
        <input type="text" ng-model="sampleData.Region">
    </md-input-container>

    <md-input-container >
        <label>Division</label>
        <input type="text" ng-model="sampleData.Division">

    </md-input-container>  
    <md-input-container>
        <label>School ID</label>
        <input type="text" ng-model="sampleData.SchoolID">
    </md-input-container>    

    <md-input-container>
        <label>School Year</label>
        <input type="text" ng-model="sampleData.SchoolYear">
    </md-input-container>

    <md-input-container>
        <label>Grade &amp; Section </label>
        <input type="text" ng-model="sampleData.Grade_Section">
    </md-input-container>

    <md-input-container>
        <label>Teacher</label>
        <input type="text" ng-model="sampleData.Teacher">
    </md-input-container>

    <md-input-container style="position: relative; bottom: 11px;">
        <md-select ng-model="Subject" placeholder="Subject">
            <md-option value="Araling Panlipunan">Araling Panlipunan</md-
     option>
            <md-option value="Edukasyon sa Pagpapakatao">Edukasyon sa 
     Pagpapakatao</md-option>
            <md-option value="English">English</md-option>
            <md-option value="Filipino">Filipino</md-option>
            <md-option value="Home Economics">Home Economics</md-option>
            <md-option value="Mathematics">Mathematics</md-option>
            <md-option value="Science">Science</md-option>
            <md-option value="TLE">TLE</md-option>
        </md-select>
     </md-input-container>

     <div layout="row">
        <ng-form role="form">
            <md-input-container>
                <label>Learners' Name</label>
                <input type="text" id="name" ng-model="New_Student">
                <span class="label label-primary">Last Name, First Name 
      Initial</span>
            </md-input-container>
      <md-input-container style="position: relative; bottom: 12px;">
                <md-select ng-model="Gender" placeholder="Gender">
                    <md-option value="Male">Male</md-option>
                    <md-option value="Female">Female</md-option>
                </md-select>
            </md-input-container>
                <md-button class="md-raised md-primary" ng-
       click="addStudent()">
                    Add Student
                </md-button>
        </ng-form>
    </div>
</form>   
</div>
<div layout="row">
<table class="table table-striped table-hover">
    <thead>
        <th>Learners' Name</th>

    </thead>
    <tbody>
        <tr ng-repeat="student in studentData|orderBy:'student_name'">
            <td>
               {{student.student_name}}
            </td>
       </tr>
    </tbody>
</table>
</div>

Answer 1

您忘了定义 $ scope.studentData = [] ： -

var app = angular.module("myApp", ['ngMaterial']);
app.controller("myCtrl", function($scope) {
  $scope.studentData = [];
  $scope.Reset = function() {
    $scope.New_Student = '';
  }
  $scope.addStudent = function() {

    $scope.studentData.push({
      student_name: $scope.New_Student
    });
    $scope.Reset();
    console.log($scope.studentData);
  }
});

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    <div layout="row">
      <ng-form role="form">
        <md-input-container>
          <label>Learners' Name</label>
          <input type="text" id="name" ng-model="New_Student">
          <span class="label label-primary">Last Name, First Name Initial</span>
        </md-input-container>

        <md-input-container style="position: relative; bottom: 12px;">
          <md-select ng-model="Gender" placeholder="Gender">
            <md-option value="Male">Male</md-option>
            <md-option value="Female">Female</md-option>
          </md-select>
        </md-input-container>
        <md-button class="md-raised md-primary" ng-click="addStudent()">
          Add Student
        </md-button>
      </ng-form>
    </div>

    <div layout="row">
      <table class="table table-striped table-hover">
        <thead>
          <th>Learners' Name</th>

        </thead>
        <tbody>
          <tr ng-repeat="student in studentData">
            <td>
              {{student.student_name}}
            </td>
          </tr>
        </tbody>
      </table>
    </div>

Answer 2

<td>
    {{student.Student_name}}
</td>

和

push({ student_name: $scope.New_Student })

变量student_name中的错字（首字母大小写）

我无法在Angular中显示新对象

2 个答案: