单击编辑按钮 AngularJS 时自动填充字段 - Auto fill fields when clicking an edit button AngularJS

我必须做的是：每个用户附近都有一个EDIT button。当我单击EDIT button时，我被重定向到另一个名为'#'editMember的page，其中包含我可以编辑的字段。现在我正在尝试当我单击EDIT时，字段会自动填充用户的信息。信息应该放在关于用户id的信息，所以如果我点击约翰史密斯的EDIT button，约翰史密斯的信息extracted到字段中。

我的问题是，当我单击EDIT按钮时，字段未填写，并出现以下错误。 ReferenceError: $routeParams is not defined

更新：我发现我在.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(成员编辑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 App (routeing(：

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中的 id 匹配的位置(：

    <?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">

如果不看到实际的返回值，很难真正说出问题的根源。

但是我看到的是：您期望查询的结果是一个成员数组，但 PHP 返回一行：

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

因此，当您迭代该行时，您将没有键和值，而是一个column of columns。反过来，该列显然没有.name或.surname这样的属性。

更新：

另一个问题是，您的 PHP 代码不返回内容类型Content-type: text/json 。Angulars $http服务将使用内容类型来决定响应字符串是否为 JSON。ng 的早期版本使用正则表达式来识别 json，但现在已经放弃了，转而支持包含 json (https://github.com/angular/angular.js/issues/2973( 的内容类型。

因此，请尝试在 PHP 响应中添加内容类型标头，如 application/json 或 text/json，然后重试。

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

你需要在 html 中引用角度路由 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代码，因此我无法验证这是否确实是问题所在。

已解决

显然我的ng-model与$scope.members = data;不匹配我的错误是我写了members.name而不是member.name

(我有点生气:)(