2016-01-07 58 views
0

我必須做什麼:每個用戶附近都是EDIT button。當我點擊EDITbutton時,我被重定向到另一個page,名爲\#\editMember,其中有我可以編輯的字段。現在我試着點擊EDIT,這些字段會自動填入用戶的信息。信息應該放在關於用戶的id,所以如果我點擊John Smith的EDITbutton,John Smith的信息是extracted單擊編輯按鈕時自動填充字段AngularJS

我的問題是,當我點擊EDIT按鈕的字段沒有被填充,並給我下面的錯誤。 ReferenceError: $routeParams is not defined

更新:我發現我在.when('/memberEdit/:memberID...有一個失蹤/

UPDATE 2:我已通過插入我的index.html文件路徑更新了該文章。

UPDATE 3:字段未被自動填充(空) 和已解決的錯誤。從

while($row = mysqli_affected_rows($result)) { 
    $data = $row; 
} 

更改代碼

while($row = mysqli_fetch_assoc($result)) { 
     $data = $row; 
    } 

謝謝!

這裏是我的代碼:

HTML(索引頁面,在這裏的文件鏈接和等存儲):

<head> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> 
    <link rel="stylesheet" href="styles.css"/> 
    <script src="http://maps.googleapis.com/maps/api/js"></script> 
    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous"> 
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
    <script src="js/javascript.js"></script> 
    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 

    <script src="js/angular.min.js"></script> 
    <script src="js/angular-route.min.js"></script> 
    <script src="angularApp.js"></script> 
    <!-- bxSlider Javascript file --> 
    <script src="js/jquery.bxslider.min.js"></script> 
    <!-- bxSlider CSS file --> 
    <link href="libraries/jquery.bxslider.css" rel="stylesheet" /> 


    <title> Music </title> 
</head> 

HTML(會員,顯示所有用戶buttons編輯):

<thead><tr> <th> Member Image </th><th>Name</th> <th>Surname</th> <th>Status</th> </tr></thead> 
     <tbody> 
      <tr ng-repeat="member in members | filter: searchTerm | orderBy: orderFilter"> 
       <td> <a href="#/memberDetails"> <img class="image" ng-src="{{member.memberImage}}"> </a></td> 
       <td>{{member.name | uppercase}}</td> 
       <td>{{member.surname | uppercase}}</td> 
       <td>{{member.dateOfAffiliation | date}}</td> 
       <td>{{member.status}}</td> 
       <td>{{member.email}}</td> 
       <td>{{member.summary}}</td>    

       <td> 
       <button class="btn btn-primary" ng-click="deleteMember(member)"> DELETE </button> 
       </td> 
       <td> 
       <a href="#/memberEdit/{{member.memberID}}"> <button class="btn btn-primary"> EDIT </button> </a> 
       <br> 
       </td> 
      </tr> 
     </tbody> 
    </table> 

HTML(會員編輯page其中填寫會員的信息):

<div id="container"> 
<form class="form-group" id="customForms"> <!-- single controller--> 
      <label> Name </label> 
       <input id="customFormsInput" class="form-control" ng-model="member.name" type="text" placeholder="Name goes here" required/> 
       <br> 
      <label> Surname </label> 
       <input id="customFormsInput" class="form-control" ng-model="member.surname" type="text" placeholder="Surname goes here" required/> 
       <br> 
      <label> Date of Affiliation </label> 
       <input id="customFormsInput" class="form-control" ng-model="member.dateOfAffiliation" type="date" required/> 
       <br> 
      <label> Status </label> 
      <br> 
       <select ng-model="member.status"> 
        <option disabled="disabled">Choose member status</option> 
        <option value="active">Active</option> 
        <option value="non-active">Non-Active</option> 
       </select> 
      <br><br> 
      <label> Email </label> 
       <input id="customFormsInput" class="form-control" ng-model="member.email" type="email" required/> 
       <br> 
      <label> Summary </label> 
       <br> 
       <textarea ng-model="member.summary" rows="2" cols="100" type="text" placeholder="Insert text here" required> 
       <!-- User text --> 
       </textarea> 
       <br> <br> 
       <br> <br> 
      <button class="btn btn-primary" type="submit"> Update </button> 
      <br> <br> <br> 
       <a href="#/memberList"> <button class="btn btn-primary"> Return to Member List</a> </button> 
     </form> 
</div> 

AngularJS應用(控制器):

 app.controller('editMemberCtrl', ['$scope', '$http', '$location', '$routeParams', function() { 
     var memberID = $routeParams.memberID; 
     console.log(id); 
     $scope.updateMessage = ""; 

     $http.post('model/editMember.php', {'memberID': memberID}).success(function(data) { 
      $scope.members = data; 
      console.log("Got data of member" + data); 
     }); 
    }]); 

AngularJS應用(路由):

var app = angular.module('ScrollingApp', ['ngRoute']) 
     .config(['$routeProvider', function($routeProvider) { 
      $routeProvider 
       .when('/home', { 
        templateUrl: 'view/home.html' 
       }) 
       .when('/promo', { 
        templateUrl: 'view/promoSection.html' 
       }) 
       .when('/contactUs', { 
        templateUrl: 'view/contactUs.html', controller: 'mapController' 
       }) 
       .when ('/aboutUs', { 
        templateUrl: 'view/aboutUs.html' 
       }) 
       .when('/loginForm', { 
        templateUrl: 'view/loginForm.html' 
       }) 
       .when('/memberList', { 
        templateUrl: 'view/memberList.html', controller: 'memberCtrl' 
       }) 
       .when('/contactUsList', { 
        templateUrl: 'view/contactUsList.html' 
       }) 
       .when('/memberDetails', { 
        templateUrl: 'view/memberDetails.html', controller: 'memberCtrl' 
       }) 
       .when('/memberEdit/:memberID', { 
        templateUrl: 'view/memberEdit.html', controller: 'editMemberCtrl' 
       }) 
       .otherwise({ 
        redirectTo: '/home' 
       }); 
     }]); 

PHP(要讀取其中id匹配從table的一個):

<?php 
    $data = json_decode(file_get_contents("php://input")); 
    $memberID = $data->memberID; 

    require_once("connection.php"); 
    $connection = connectToMySQL(); 
    $query = "SELECT * FROM tbl_member WHERE memberID = $memberID"; 
    $result = mysqli_query($connection, $query) 
     or die("Error in query: ". mysqli_error($connection)); 

    while($row = mysqli_fetch_assoc($result)) { 
     $data = $row; 
    } 
    echo json_encode($data); 
?> 

給出的錯誤:

ReferenceError: $routeParams is not defined 
    at new <anonymous> (http://localhost/music/angularApp.js:124:17) 
    at e (http://localhost/music/js/angular.min.js:39:394) 
    at Object.instantiate (http://localhost/music/js/angular.min.js:40:9) 
    at http://localhost/music/js/angular.min.js:80:442 
    at A.link (http://localhost/music/js/angular-route.min.js:7:268) 
    at ea (http://localhost/music/js/angular.min.js:73:293) 
    at D (http://localhost/music/js/angular.min.js:62:190) 
    at g (http://localhost/music/js/angular.min.js:55:105) 
    at http://localhost/music/js/angular.min.js:54:249 
    at http://localhost/music/js/angular.min.js:56:79 <div ng-view="" class="ng-scope"> 
+0

theres在URL中丟失斜線(在路由器中) – Etse

+0

@Etse Hehe剛剛發現它,但它仍然給我一個n錯誤,(我更新了主題)。謝謝 – hurkaperpa

回答

0

您需要在html中引用angular-route javascript文件。嘗試將以下行添加到HTML標記(替換X.Y.Z,使用AngularJS你正在使用的版本:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script> 

例如

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script> 

你沒有完整的HTML代碼,所以我無法驗證,如果這確實是問題。

+0

我已經預先包含了'angular-route.min,js'文件(我在本地下載了它)。我用我的'index.html'文件更新了我的帖子,如果你喜歡,你可以看看。謝謝! – hurkaperpa

1

如果沒有看到實際的返回值,很難真正地說出問題的根源。

但我所看到的:你期待成員的數組從您的查詢的結果,但PHP返回一行:

while($row = mysqli_affected_rows($result)) { 
    $data = $row; 
} 
echo json_encode($data); 

因此,當你遍歷行,你不會有鍵和值,而是一個column of columns。該列反過來顯然沒有.name.surname等屬性。

更新:

的另一個問題是,你的PHP代碼不會返回內容類型Content-type: text/json。如果您的響應字符串是JSON,則服務將使用內容類型來決定服務。 ng的早期版本使用正則表達式來標識json,但是已經放棄了支持包含json的內容類型(https://github.com/angular/angular.js/issues/2973)。

因此,嘗試在PHP響應中添加內容類型標頭,如application/jsontext/json,然後重試。

header('Content-Type: application/json'); 
+0

謝謝!我發現它需要'while($ row = mysqli_fetch_assoc($ result)){ \t \t $ data = $ row; \t}'而不是'mysqli_affected_rows'。現在可以避免這個錯誤,但是這些字段仍然是空的;沒有id的值(名字,姓氏,日期等):( – hurkaperpa

0

解決

顯然我ng-model沒有與$scope.members = data; 我的錯誤匹配的是,我寫members.name代替member.name

(我有點瘋了:))

相關問題