AngularJS $ routeProvider不在<div ng-view =“”>中显示html页面

时间:2016-12-09 13:59:50

标签: angularjs

我是AngularJS的新手,需要一些帮助来解决在传递参数时路由到另一个html页面的问题。我的应用程序有一个带有输入字段(名称和课程)的表单。用户输入的信息将显示在隐藏的表中,除非它有要显示的数据。

问题是当点击“显示信息”链接时,我没有被路由到DisplayInfo.html页面。

以下是代码:http://plnkr.co/edit/6WpZYkKMy0B4Vl8Phtnw?p=preview

app.js文件

var app = angular.module('student', []);

app.controller('StudentController', function($scope) {
    $scope.studentList = [];

    $scope.addStudent = function() {
    this.studentList.push({
    name: $scope.getName,
    course: $scope.getCourse,
    date: new Date()
  });

    $scope.getName = "";
    $scope.getCourse = "";
 };


    app.config(['$routeProvider',
        function($routeProvider) {
        $routeProvider.
       when('/DisplayInfo/:name', {
       templateUrl: 'DisplayInfo.html',
       controller: 'DisplayInfoController'
   });
 }
]);


app.controller('DisplayInfoController', function($scope, $routeParams) {


$scope.name = $routeParams.getName;

  });

});

的index.html

<!DOCTYPE html>
<html ng-app="student">


<head>

    <link rel="stylesheet" type="text/css" href="student.css">

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


</head>

<body>

    <div class="container">
        <div id="header">
            <h1>Student Access</h1>
            <p>

            <fieldset>


                <br />
                <br />

                <form ng-controller="StudentController as studentCtrl" ng-submit="addStudent()">

                    <div ng-if="studentList.length > 0">
                        <table class="table table-striped">

                            <tr>
                                <th>
                                    Name
                                </th>
                                <th>
                                    Course
                                </th>
                                <th>
                                    Date
                                </th>
                            </tr>

                            <tr ng-repeat="getStudent in studentList track by $index">

                                <td ng-bind="getStudent.name">

                                </td>
                                <td  ng-bind="getStudent.course">

                                </td>
                                <td  ng-bind="getStudent.date | date:'MM-dd-yyyy'">

                                </td>
                                <td><a href="#DisplayInfo/{{getStudent.name}}">Display Info</a></td>

                            </tr>
                        </table>

                    </div>
                    <div ng-view></div>                       
                     <br />
                    <fieldset class="form-group">
                        <legend><strong>First Name</strong></legend>
                        <input ng-model="getName" type="text" class="form-control" title="Name" placeholder="Enter Student Name" />
                    </fieldset>

                    <fieldset class="form-group">
                          <legend><strong>Course</strong></legend>
                        <input ng-model="getCourse" type="text" class="form-control" title="Course" placeholder="Enter Course" />
                    </fieldset>

                        <input type="submit" class="btn btn-primary pull-right" value="Add Info" />

                </form>

            </fieldset>


        </div>
    </div>
        <!-- AngularJS Library -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">      </script>

<script src="app.js"></script>
</body>

DisplayInfo.html

Name: {{getStudent.name}}
Here are the details for todo item: #{{getStudent}.

1 个答案:

答案 0 :(得分:0)

我认为/中缺少<td><a href="#DisplayInfo/{{getStudent.name}}">Display Info</a></td>

<td><a href="#/DisplayInfo/{{getStudent.name}}">Display Info</a></td>

应该是:

int led=12;
int button=4;

void setup() {
  // put your setup code here, to run once:
  pinMode(led,OUTPUT);//tekst
  pinMode(button,INPUT_PULLUP);
}

void loop() {
  // put your main code here, to run repeatedly:


    if(digitalRead(button))
    {
      digitalWrite(led,HIGH);
    }

   else 
   {
      digitalWrite(led,LOW);
   }
}