0
Что я должен делать: Рядом с каждым пользователем находится EDIT button. Когда я нажимаю EDITbutton, я перенаправляюсь к другому page под названием \#\editMember, у которого есть поля, где я могу редактировать. Теперь я пытаюсь, когда я нажимаю EDIT, поля заполняются автоматически с информацией пользователя. Информация должна быть размещена относительно пользователя id, поэтому, если я нажму на EDITbutton Джона Смита, информация Джона Смита будет полезна extracted.Автоматическое заполнение полей при нажатии кнопки редактирования AngularJS
Моя проблема что, когда я нажимаю кнопку EDIT, поля не заполняются и приносят мне ошибку ниже. ReferenceError: $routeParams is not defined
UPDATE: я узнал, я был отсутствующий / в .when('/memberEdit/:memberID...!
ОБНОВЛЕНИЕ 2: Я обновил сообщение, вставив мои пути index.html.
ОБНОВЛЕНИЕ 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 (MemberEdit 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'
});
}]);
РНР (Чтобы узнать, где идентификатор соответствует одному из 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 Хе-хе-хе только что нашел это сейчас, однако он все еще дает мне n ошибка (обновленная тема). Спасибо – hurkaperpa