如何正确应用Angularjs ng-repeat?

时间:2021-05-13 07:36:35

I'm just a beginner in angularjs, and I'm creating an app, I already made the output correctly but I want to achieve it without using jQuery, I want to do it using angularjs way using "ng-repeat".

我只是angularjs的初学者,我正在创建一个应用程序,我已经正确地输出了但我想在不使用jQuery的情况下实现它,我想使用angularjs方式使用“ng-repeat”来实现它。

The following code is what's inside my controller:

以下代码是我的控制器内部的代码:

.controller('SomeListCtrl',function(SomeFromService, $scope, $stateParams, $http){

var encodedString = 'action=' + 
        encodeURIComponent("getSomething") +
        '&count=' +
        encodeURIComponent("10") + 
        '&page=' +
        encodeURIComponent("1");

$http({
    method: 'POST',
    url: 'http://service.something/site.aspx',
    data: encodedString,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data){
    $scope.myData = data;
})
.error(function(data, status){
    console.log(status);
})
})

And this is in my html where I need to pass it:

这是在我需要传递它的html中:

<ion-view view-title="Latest News">
  <ion-content>
    <ion-list>
      <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="data as myData" type="item-text-wrap" href="#/tab/myLink/{{data.id}}">
        <img ng-src="http://the-v.net{{data.ImageLink}}">
        <h2>{{data.localTitle}}</h2>
        <i class="icon ion-chevron-right icon-accessory"></i>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

P.S. The data that the ajax call returns is json. which is constructed this way

附: ajax调用返回的数据是json。这是以这种方式构建的

[{
"id": "5f6e8bac-197f-4ae3-8535-6d892a101d17",
"localTitle": "Public"
}]

2 个解决方案

#1


3  

AngularJS controllers aims not to use/create HTML elements directly in their code. You use the view/HTML to render the values returned by the AJAX response.

AngularJS控制器旨在不在代码中直接使用/创建HTML元素。您使用视图/ HTML来呈现AJAX响应返回的值。

Controller

调节器

... 
$scope.values = [];

...
.success(function (response,status, headers, config){
    // put the response values in a scope object
    $scope.values = response;
})
...

View

视图

<!-- render the values using ng-repeat -->
<div ng-repeat="value in values">
    {{value.localTitle}}
</div>

References

参考

#2


1  

https://docs.angularjs.org/api/ng/directive/ngRepeat

https://docs.angularjs.org/api/ng/directive/ngRepeat

just declare your json data in controller with scope then use it on your view

只需在带有作用域的控制器中声明您的json数据,然后在视图中使用它

controller.js

controller.js

$scope.myObj = 'http response here';

view.html

view.html

<table>
   <tr ng-repeat="data as myObj"> 
     <td>{{data.localTitle}}</td>
   </tr>
</table>

#1


3  

AngularJS controllers aims not to use/create HTML elements directly in their code. You use the view/HTML to render the values returned by the AJAX response.

AngularJS控制器旨在不在代码中直接使用/创建HTML元素。您使用视图/ HTML来呈现AJAX响应返回的值。

Controller

调节器

... 
$scope.values = [];

...
.success(function (response,status, headers, config){
    // put the response values in a scope object
    $scope.values = response;
})
...

View

视图

<!-- render the values using ng-repeat -->
<div ng-repeat="value in values">
    {{value.localTitle}}
</div>

References

参考

#2


1  

https://docs.angularjs.org/api/ng/directive/ngRepeat

https://docs.angularjs.org/api/ng/directive/ngRepeat

just declare your json data in controller with scope then use it on your view

只需在带有作用域的控制器中声明您的json数据,然后在视图中使用它

controller.js

controller.js

$scope.myObj = 'http response here';

view.html

view.html

<table>
   <tr ng-repeat="data as myObj"> 
     <td>{{data.localTitle}}</td>
   </tr>
</table>