使用REST API在angularjs中进行CRUD操作

时间:2014-07-07 10:42:48

标签: javascript php angularjs rest crud

使用AngularJS的CRUD操作正常。单击提交按钮值将在db中提交,但它不会同时反映在视图上。 要么我需要单独的按钮来显示数据库中的值,要么我需要点击两次。

我的观点:

<div style="float:left; margin-left:50px;">
    <div><label for="id">Update Records</label></div><br>
<table>
<tr >
    <td><label for="id">Id:</label> </td>
    <td><input type="text" name="id" ng-model="user.id"/></td>
</tr>
<tr >
    <td><br><label for="uname">Name:</label> </td>
    <td><input type="text" name="uname" ng-model="user.uname"/></td>
</tr>
<tr>
    <td><br><label for="ucity">City:</label> </td>
    <td><input type="text" name="ucity" ng-model="user.ucity"/></td>
</tr>

<tr>
    <td>
    <a ng-click="updatecust(user.id,user.uname,user.ucity)" class="btn btn-primary">Update</a>
    </td>
</tr> 
<!--<tr>
    <td><br>
        <a ng-click="viewtable()" class="btn btn-primary">View All</a>
        </td>
</tr> -->
</table>
</div>

我的控制器:

   var phonecatControllers = angular.module('phonecatControllers', ['templateservicemod', 'navigationservice','restservice']);

  $scope.updatecust=function(id,name,city){
          console.log("update is clicked");
          $scope.user={id:id,uname:name,ucity:city};
          RestService.update(id,name,city).success( RestService.vieww().success(viewdata));
      };

REST API:

var restservice = angular.module('restservice', [])

.factory('RestService', function ($http) {

return{

        update: function(id,name,city){
            console.log(id+name+city);
            return $http.get("http://localhost/code/index.php/demo/updatedemo?id="+id+"&   uname="+name+"&ucity="+city,{});
        }
}

});

1 个答案:

答案 0 :(得分:0)

RestService.update(id,name,city).success( RestService.vieww().success(viewdata));

这应该改为

RestService.update(id,name,city).success(function(){
    RestService.vieww().success(function(data){
        $scope.viewdata = data.data;
    }));
});

通过考虑,你有RestService函数vieww来获取数据数组。

在HTML中,您需要为viewdata执行ngRepeat才能显示表格。