2015-08-25 65 views
1

我是新角度。我創建了一個html,我從其他服務中獲取值。我使用ng-repeat將這些值放入表中,但表中沒有顯示任何錯誤值。請大家檢查我的代碼一次。Angularjs表代碼不起作用

<!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 = ["[email protected]", "[email protected]"]; 
      $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> 
+0

其非常緊急的傢伙,如果任何人知道我做錯了,請發佈相同的 –

+3

沒有什麼是***緊急***在這裏。需要更多信息。 ajax請求是否成功,並按預期返回適當的數據?你做了什麼故障排除?只是說'它不工作'不是一個適當的問題描述 – charlietfl

+0

我得到的答覆,我將它放在json使用索賠='[{'; 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 + ='}]'; –

回答

0

嘗試構建不包含索賠字符串的人員數組。下面應該做的工作(假設專案編號,項目名稱等有預期值):

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

可能解決短期問題,但沒有必要首先創建該字符串 – charlietfl

+0

我同意。我想我們可以使用服務的實際響應。 –

+0

SyntaxError:意外的令牌來了,當我使用$ scope.people = JSON.parse(聲明); –

0

沒有看到原始響應看起來完全是什麼樣子,很難肯定地說,但它看起來像你做了很多不必要的工作。

,如果你只是改變你的JavaScript來會發生什麼:

var app = angular.module('myApp', []); 
function ContactController($scope,$http) { 
// $scope.contacts = ["[email protected]", "[email protected]"]; 
$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) { 

    }); 
    } 
} 

` 看起來你已經有一個有效的JSON響應從您的REST服務回來。

+0

不,我沒有得到有效的JSON我得到的回覆1 |示例項目1 | 1 | WIP | null | null | 2015-08-24 16:38:39.0 | http://hcup-us.ahrq.gov/toolssoftware /ccs/ccs.jsp然後我轉換到JSON –

+1

@chandrak如果你可以改變管道分隔響應數據到REST中的對象併發送對象爲JSON,你需要做的就是設置對範圍變量的響應並刪除所有您解析響應的其他代碼。你的格式沒有意義 – charlietfl