需要帮助获取数据JSON以扩展AngularJS的范围

时间:2022-08-26 11:58:59

i am newbie at AngularJS and in now trying to learn it. This time i am learning how to create one page app using codeigniter and angular with RESTful lib.

我是AngularJS的新手,现在正在努力学习它。这次我正在学习如何使用codeigniter创建一个页面应用程序,并使用RESTful lib创建角度。

I have JSON like this :

我有这样的JSON:

[{"id":"25","title":"abc","description":"sss"},{"id":"26","title":"sd","description":"sdsd"}]

i just cannot fetch it to $scope with ng-repeat working no matter what i do. This is my function :

无论我做什么,我都无法使用ng-repeat工作将其带到$ scope。这是我的功能:

$http.get('Api/items').then(function(response)
        {       
            $scope.items = response;
            console.log(response);
        });

and this is my table view :

这是我的表格视图:

<table class="table table-bordered pagin-table">
<thead>
    <tr>
        <th>No</th>
        <th>Title</th>
        <th>Description</th>
        <th width="220px">Action</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="x in items">
        <td>{{ $index + 1 }}</td>
        <td>{{ x.title }}</td>
        <td>{{ x.description }}</td>
        <td>
            <button data-toggle="modal" ng-click="edit(x.id)" data-target="#edit-data" class="btn btn-primary">Edit</button>
            <button ng-click="remove(x,$index)" class="btn btn-danger">Delete</button>
        </td>
    </tr>
</tbody>

This is what happen when those all executed : 需要帮助获取数据JSON以扩展AngularJS的范围

当这些都被执行时会发生这种情况:

no array fetched by $scope at all. weird thing is the <tr> is repeated 5 time without any value. but when i call array[0] the $scope can fetch it :

根本没有$ scope获取的数组。奇怪的是重复5次没有任何价值。但是当我调用array [0]时,$ scope可以获取它:

<table class="table table-bordered pagin-table">
<thead>
    <tr>
        <th>No</th>
        <th>Title</th>
        <th>Description</th>
        <th width="220px">Action</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="x in items">
        <td>{{ $index + 1 }}</td>
        <td>{{ x[0].title }}</td>
        <td>{{ x[0].description }}</td>
        <td>
            <button data-toggle="modal" ng-click="edit(x.id)" data-target="#edit-data" class="btn btn-primary">Edit</button>
            <button ng-click="remove(x,$index)" class="btn btn-danger">Delete</button>
        </td>
    </tr>
</tbody>

需要帮助获取数据JSON以扩展AngularJS的范围

Where did i go wrong?? can someone help me??

我哪里做错了??有人能帮我吗??

2 个解决方案

#1


4  

It is because the promise returning raw HTTP response from the server rather than parsed result data. You should try this instead :

这是因为promise从服务器返回原始HTTP响应而不是解析结果数据。你应该试试这个:

$http.get('Api/items').then(function(response)
        {       
            $scope.items = response.data;
            console.log(response);
        });

#2


2  

@digit already pointed the issue in you $hhtp call. Now For this JSON:

@digit已经在你的$ hhtp调用中指出了这个问题。现在对于这个JSON:

 [{"id":"25","title":"abc","description":"sss"},{"id":"26","title":"sd","description":"sdsd"}]

. No need to give index number inside ng-repeat. //{{ x[0].title }}

。无需在ng-repeat中给出索引号。 // {{x [0] .title}}

<tr ng-repeat="x in items">
        <td>{{ $index + 1 }}</td>
        <td>{{ x.title }}</td>
        <td>{{ x.description }}</td>
        <td>
            <button data-toggle="modal" ng-click="edit(x.id)" data-target="#edit-data" class="btn btn-primary">Edit</button>
            <button ng-click="remove(x,$index)" class="btn btn-danger">Delete</button>
        </td>
    </tr>

#1


4  

It is because the promise returning raw HTTP response from the server rather than parsed result data. You should try this instead :

这是因为promise从服务器返回原始HTTP响应而不是解析结果数据。你应该试试这个:

$http.get('Api/items').then(function(response)
        {       
            $scope.items = response.data;
            console.log(response);
        });

#2


2  

@digit already pointed the issue in you $hhtp call. Now For this JSON:

@digit已经在你的$ hhtp调用中指出了这个问题。现在对于这个JSON:

 [{"id":"25","title":"abc","description":"sss"},{"id":"26","title":"sd","description":"sdsd"}]

. No need to give index number inside ng-repeat. //{{ x[0].title }}

。无需在ng-repeat中给出索引号。 // {{x [0] .title}}

<tr ng-repeat="x in items">
        <td>{{ $index + 1 }}</td>
        <td>{{ x.title }}</td>
        <td>{{ x.description }}</td>
        <td>
            <button data-toggle="modal" ng-click="edit(x.id)" data-target="#edit-data" class="btn btn-primary">Edit</button>
            <button ng-click="remove(x,$index)" class="btn btn-danger">Delete</button>
        </td>
    </tr>