AngularJS资源+ Slim Framework仅获取单个数据

时间:2015-10-03 03:21:19

标签: javascript php angularjs slim

我使用Slim Framework作为我的后端并使用AngularJS作为我的前端创建一个宁静的单页应用程序。到目前为止,Create,Retrieve All和Delete正在运行,但是当我尝试检索单个数据时,只有一个字段可用。这是我的代码:

studentController.js

<script type="text/javascript">

function insertFB(){
    var html='<div class="fb-page" data-href="https://www.facebook.com/bobcaputolivingwell" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/bobcaputolivingwell"><a href="https://www.facebook.com/bobcaputolivingwell">Bob Caputo Living Well</a></blockquote></div></div>';
    $("#FB_PAGE").html(html);
}

if (document.addEventListener){
    document.addEventListener("DOMContentLoaded", insertFB, false);
}

if (/WebKit/i.test(navigator.userAgent)){
    var _timer = setinterval(function(){
        if(/loaded|complete/.test(document.readyState)){
            insertFB();
        }
    },10);
}

window.onload = insertFB();
</script>

index.php(苗条)

angular
    .module('studentInfoApp')
    .factory('Student', Student)
    .controller('StudentsController', StudentsController)
    .config(config);

function config($routeProvider) {
    $routeProvider
    .when('/', {
        controller: 'StudentsController',
        templateUrl: 'app/views/student-list.html'
    });

}

function Student($resource) {
    //return $resource('/students/:id');
    return $resource("/students/:id", {}, {
    query: { method: "GET", isArray: true }
  });

}
function StudentsController(Student, $scope, $http) {

    $scope.inputForm = {};
    $scope.students = null;

    function clearInput() {
        $scope.inputForm = {
            fname: '',
            lname: '',
            age: '',
            email: ''
        }
    }

    function initStudents() {
        Student.query(function(data, headers) {
            $scope.students = data;
            $scope.studentsPanel = true;
            console.log(data);
        }, function (error) {
            console.log(error);
        });
    }

    initStudents();

    $scope.editStudent = function(id) {
        Student.query({ id: id }, function(data, headers) {
            $scope.student = data;
            console.log(data);
            $scope.dataForm = true;
        }, function (error) {
            console.log(error);
        });

    }

}

学生list.html

$app->get('/students/:id', 'getStudent');
function getStudent($id) {
    $app = \Slim\Slim::getInstance();
    try {
        $db = getConnection();
        $query = $db->prepare("SELECT * FROM students where id=?");
        $query->execute(array($id));
        $stmt = $query->fetchAll(PDO::FETCH_ASSOC);
        $data = json_encode($stmt);
        echo $data;
    } catch(PDOException $e) {
        echo '{"error":{"text":'. $e->getMessage() .'}}'; 
    }
}

当我运行它时,我得到了这个页面:

enter image description here

当我点击<!--edit form--> <div class="col s12" ng-show="dataForm" ng-repeat="x in student"> <div class="row"> <div class="input-field col l6 s12"> <input id="first_name" value="{{ x.fname }}" type="text" class="validate" ng.model="editForm.fname"> <label class="active" for="first_name">First Name</label> </div> <div class="input-field col l6 s12"> <input id="last_name" value="{{ x.lname }}" type="text" class="validate" ng-model="editForm.lname"> <label class="active" for="last_name">Last Name</label> </div> </div> <div class="row"> <div class="input-field col l6 s12"> <input id="email" value="{{ x.email }}" type="email" class="validate" ng-model="editForm.email"> <label class="active" for="email">E-mail Address</label> </div> <div class="input-field col l6 s12"> <input id="age" value="{{ x.age }}" type="text" class="validate" ng-model="editForm.age"> <label class="active" for="age">Age</label> </div> </div> <button class="btn waves-effect waves-light" ng-click="updateStudent()">Submit <i class="material-icons right">send</i> </button> <button class="btn waves-effect waves-light pink accent-3" ng-click="cancelEditStudent()">Cancel</button> </div> <!-- form --> <table class="highlight responsive-table"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Email</th> <th>Action</th> </tr> </thead> <tbody> <tr ng-repeat="s in students | filter:searchStudent" ng-show="studentsPanel"> <td>{{ s.fname }} {{ s.lname }}</td> <td>{{ s.age }}</td> <td>{{ s.email }}</td> <td><a href="javascript:void(0)" ng-click="editStudent(s.id)">Edit</a> <a href="javascript:void(0)" ng-click="deleteStudent(s.id)">Delete</a></td> </tr> </tbody> </table> 时,会显示:

enter image description here

如您所见,虽然一切正确(字段名称等),但只填充了edit,并且控制台没有返回任何错误。

我在这里遗漏了什么吗?任何帮助将非常感激。已经卡住了。

0 个答案:

没有答案