从对象返回数据并通过 AngularJS 在 <ul> 中显示答案

【问题标题】：Return data from object and show in <ul> via AngularJS从对象返回数据并通过 AngularJS 在 <ul> 中显示
【发布时间】：2014-11-26 16:12:44
【问题描述】：

我有一个从服务器接收以下 JSON 的控制器：

"[{\"nome\": \"Ricardo Andrade\"}]"

我的控制器正在通过解析 JSON 来删除 \，我的控制器是：

app.controller("userLogado", function ($scope, $http) {

    //$http.get('web/core/components/home/nav.json').
    $http.get('http://localhost:2099/api/autenticacao/NomeUsuarioLogado').
     success(function (data) {

         debugger;
          var result = json_parse(data);

          var sNome = '';

          $.each(result, function(key, item) {

              sNome = item.nome;
          });


      })
});

我的问题是，我如何获取这个控制器的结果并使用 AngularJS 在我的 HTML 中显示？

我尝试使用警报并获得了如下正确名称：“Ricardo Andrade”。

提前致谢！

【问题讨论】：

标签： javascript .net json angularjs get

【解决方案1】：

就像将结果附加到控制器一样简单。获得所需结果后，只需将其附加到范围即可。

app.controller("myCtrl", function ($scope, $http) {
    $scope.result = "Ricardo Andrade"
});

还有 HTML

<div ng-controller="myCtrl">
{{result}}
</div>

如果您有多个名称，则需要 ng-repeat 名称。

<div ng-controller="myCtrl">
  <ul ng-repeat='name in result'>
    <li>{{name}}</li>
  </ul>
</div>

【讨论】：

【解决方案2】：

<ul>
  <li ng-repeat="names in result">
    [{{$index + 1}}] {{names.nome}}
  </li>
</ul>

看看 ngRepeat：

文档：https://docs.angularjs.org/api/ng/directive/ngRepeat

W3Schools：http://www.w3schools.com/angular/angular_directives.asp

编辑：

我听说将 ng-repeat 与数组一起使用会更好，所以如果您愿意，可能会想要这样做：

你的控制器：

$scope.allNames =[];
app.controller("userLogado", function ($scope, $http) {

//$http.get('web/core/components/home/nav.json').
$http.get('http://localhost:2099/api/autenticacao/NomeUsuarioLogado').
 success(function (data) {

    debugger;
    var result = json_parse(data);

    for(var name in result) {                   
        $scope.allNames.push(angular.copy(result[name]));
    }          

  })
});

您的 HTML：

<ul>
  <li ng-repeat="names in allNames">
    [{{$index + 1}}] {{names.nome}}
  </li>
</ul>

ul 列表必须在具有 ng-controller 属性的容器内。

例如

<div ng-controller="userLogado">
 <ul list here>
</div>

使用带有 ng-repeat 的数组的好处是您可以过滤 (Read here) 和排序 (Read here) 数据。

【讨论】：