Question

我是棱角分明的新人。我创建了一个HTML，我从休息服务中获取值。我使用ng-repeat将这些值放入表中，但值没有显示在表中而没有任何错误。请大家检查一下我的代码。

<!DOCTYPE html>
<html>

<head>
    <title>Project Management</title>


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <link type="text/css" ng-href="http://bootswatch.com/flatly/bootstrap.min.css" rel="stylesheet" href="http://bootswatch.com/flatly/bootstrap.min.css">
    <style>
        .table-striped>tbody>tr:nth-of-type(odd) {
            background: #f1f1f1 !important;
        }
    </style>
</head>

<body>
    <style>
        table {
            border: 1px solid #666;
            width: 100%;
        }
        th {
            background: #f8f8f8;
            font-weight: bold;
            padding: 2px;
        }
    </style>
    <button type="button" class="btn btn-info pull-right btn-sm">Logout</button>

    <div ng-app="myApp">
        <div ng-controller="ContactController">

            <button ng-click="add()">Project Details</button>
            <table class="table table-striped">
                <tr>
                    <th>projectid</th>
                    <th>projectname</th>
                    <th>claintid</th>
                    <th>projectstatus</th>
                    <th>prjstartdate</th>
                    <th>prjenddate</th>
                    <th>lastmodified</th>
                    <th>prjpinurl</th>
                    <th>Actions</th>
                </tr>
                <tr ng-repeat="person in people">

                    <td>{{person.projectid}}</td>
                    <td>{{person.projectname}}</td>
                    <td>{{person.claintid}}</td>
                    <td>{{person.projectstatus}}</td>
                    <td>{{person.prjstartdate}}</td>
                    <td>{{person.prjenddate}}</td>
                    <td>{{person.lastmodified}}</td>
                    <td>{{person.prjpinurl}}</td>
                    <td>
                        <button type="button" class="btn btn-info btn-sm" ng-click="Edit(contact)">Edit</button>
                        <button type="button" class="btn btn-info btn-sm" ng-click="Remove(contact)">Remove</button>
                    </td>
                </tr>
            </table>



        </div>
    </div>
    <script type="text/javascript">
        var app = angular.module('myApp', []);

        function ContactController($scope, $http) {
            //   $scope.contacts = ["hi@email.com", "hello@email.com"];
            $scope.people = [];
            $scope.add = function() {


                // $scope.contacts.push($scope.newcontact);
                // $scope.newcontact = "";

                $http.get('http://localhost:8080/ProjectManagement/REST/GetProject/Details').success(function(data, status, headers, config, response) {

                    var json = JSON.stringify(data);

                    var getresponseText = JSON.parse(json);
                    var prjdetails = getresponseText.responseText;

                    var fields = getresponseText.split("|");


                    var projectid = fields[0];
                    var projectname = fields[1];
                    var claintid = fields[2];
                    var projectstatus = fields[3];
                    var prjstartdate = fields[4];
                    var prjenddate = fields[5];
                    var lastmodified = fields[6];
                    var prjpinurl = fields[7];

                    claim = '';

                    claim = '[{';
                    claim += '"projectid": "' + projectid + '", ';
                    claim += '"projectname": "' + projectname + '", ';
                    claim += '"claintid": "' + claintid + '", ';
                    claim += '"projectstatus": "' + projectstatus + '", ';
                    claim += '"prjstartdate": "' + prjstartdate + '", ';
                    claim += '"prjenddate": "' + prjenddate + '", ';
                    claim += '"lastmodified": "' + lastmodified + '", ';
                    claim += '"prjpinurl": "' + prjpinurl + '", ';
                    claim += '}]';
                    alert("before" + claim)
                    $scope.people = claim;


                }).error(function(data, status, headers, config, response) {


                });
            }
        }
    </script>
</body>

</html>

Answer 1

尝试在不构建声明字符串的情况下构建人员数组。以下应该做的工作（假设projectId，projectname等具有预期的值）：

$scope.people = [
    {
        projectid: projectId,
        projectname: projectname,
        claintid: claintid,
        projectstatus: projectstatus,
        prjstartdate: prjstartdate,
        prjenddate: prjenddate,
        lastmodified: lastmodified,
        prjpinurl: prjpinurl
    }
];

Answer 2

如果没有确切地看到原始响应的样子，很难肯定地说，但看起来你做了很多不必要的工作。

如果您只是将javascript更改为：

，会发生什么

var app = angular.module('myApp', []);
function ContactController($scope,$http) {
 //   $scope.contacts = ["hi@email.com", "hello@email.com"];
 $scope.people = [];
 $scope.add = function() {

  // $scope.contacts.push($scope.newcontact);
  // $scope.newcontact = "";

  $http.get('http://localhost:8080/ProjectManagement/REST/GetProject/Details').success(function(data, status, headers, config,response){
        $scope.people = data;
    }).error(function(data, status, headers, config,response) {

    });
  }
}

` 看起来您已经从REST服务返回了有效的JSON响应。

Angularjs表代码不起作用

2 个答案: