我必須做什麼:每個用戶附近都是EDIT button
。當我點擊EDIT
button
時,我被重定向到另一個page
,名爲\#\editMember
,其中有我可以編輯的字段。現在我試着點擊EDIT
,這些字段會自動填入用戶的信息。信息應該放在關於用戶的id
,所以如果我點擊John Smith的EDIT
button
,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">
theres在URL中丟失斜線(在路由器中) – Etse
@Etse Hehe剛剛發現它,但它仍然給我一個n錯誤,(我更新了主題)。謝謝 – hurkaperpa