单击编辑按钮时自动填充字段AngularJS

时间：2016-01-07 22:16:42

标签： php html angularjs

我必须做的事情：每个用户附近都是EDIT button。当我点击EDIT button时，我被重定向到另一个名为page的{​​{1}}，其中包含我可以编辑的字段。现在我正在尝试点击\#\editMember时，字段会自动填入用户的信息。应该针对用户的EDIT放置信息，因此，如果我点击John Smith的id EDIT，John Smith的信息就会显示在button字段中。

我的问题，当我点击extracted按钮时，字段未被填充并且给我以下错误。 EDIT

更新：我发现ReferenceError: $routeParams is not defined时遗失了/！

更新2 ：我已通过插入.when('/memberEdit/:memberID...文件路径来更新帖子。

更新3 ：字段未自动填充（空）                并解决了错误。 从

更改了代码 
index.html

到

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

谢谢！

这是我的代码：

HTML（存储文件等链接的索引页面）：

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> 的所有用户的MemberList）：

buttons

HTML（MemberEdit <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> 其中字段填充了成员的信息）：

page

AngularJS应用程序（控制器）：

    <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（路由）：

        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);
        });
    }]);

PHP（要读取id与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);
?>

3 个答案:

答案 0 :(得分：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，Angulars $http服务将使用内容类型来决定。早期版本的ng使用正则表达式来识别json，但已经放弃了有利于包含json（https://github.com/angular/angular.js/issues/2973）的内容类型。

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

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

答案 1 :(得分：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代码，因此我无法确认这是否确实是问题。

答案 2 :(得分：0)

<强>解决

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

（我有点生气:)）

相关问题
最新问题