使用AngularJS$http从API检索和显示数据

我有一个控制器：

app.controller('BuscadorClientesController', function(){
    this.clientes = [
        {
            tipo: {
                nombre: "Sarasa"
            },
            nombre: "Alan",
            direccion: "Fake Address 1234",
            telefono: "12341234",
            email: "ipsum@gmail.com",
            rubro: "Lorem",
            id: "1"
        }
    ]
});

在我看来，“客户”数组打印得很好，但现在我想从数据库中获取我的客户，所以我做了这个

app.service('Clientes', function ($http) {
    this.getAll = function (success, failure) {
        $http.get('/api/clientes')
            .success(success)
            .error(failure);
    }
});

app.controller('BuscadorClientesController', function($scope, Clientes){
    Clientes.getAll(function(data){
        $scope.clientes = data
        console.log($scope.clientes)
    });
});

console.log（$scope.clientes）正在打印正确的数据（一个包含许多对象的数组），但它没有显示在我的视图中：

<tr ng-repeat="cliente in buscador.clientes">
    <td><%= cliente.tipo.nombre %></td>
    <td><%= cliente.nombre %></td>
    <td><%= cliente.direccion  %></td>
    <td><%= cliente.telefono  %></td>
    <td><%= cliente.email  %></td>
    <td><%= cliente.rubro  %></td>
</tr>

---

这是正确的方法还是有更好的方法？

您使用的显示变量的方法不正确。在AngularJS中，必须使用or

您的视图应该如下所示：

<tr ng-repeat="cliente in buscador.clientes">
  <td ng-bind="cliente.tipo.nombre"></td>
  <td ng-bind="cliente.nombre"></td>
  <td ng-bind="cliente.direccion"></td>
  <td ng-bind="cliente.telefono"></td>
  <td ng-bind="cliente.email"></td>
  <td ng-bind="cliente.rubro"></td>
</tr>

---

如果您使用

控制器作为

语法，则您编辑的代码是正确的

控制器：

app.controller('BuscadorClientesController', function(Clientes){
    var vm = this;
    Clientes.getAll(function(data){
        vm.clientes = data;
        console.log(vm.clientes);
    });
});

<tr ng-repeat="cliente in buscador.clientes">
    <td><%= cliente.tipo.nombre %></td>
    <td><%= cliente.nombre %></td>
    <td><%= cliente.direccion  %></td>
    <td><%= cliente.telefono  %></td>
    <td><%= cliente.email  %></td>
    <td><%= cliente.rubro  %></td>
</tr>

app.controller('BuscadorClientesController', function($scope, Clientes){
    Clientes.getAll(function(data){
        $scope.clientes = data
        console.log($scope.clientes)
    });
});

<tr ng-repeat="cliente in clientes">
    <td><%= cliente.tipo.nombre %></td>
    <td><%= cliente.nombre %></td>
    <td><%= cliente.direccion  %></td>
    <td><%= cliente.telefono  %></td>
    <td><%= cliente.email  %></td>
    <td><%= cliente.rubro  %></td>
</tr>

html:

app.controller('BuscadorClientesController', function(Clientes){
    var vm = this;
    Clientes.getAll(function(data){
        vm.clientes = data;
        console.log(vm.clientes);
    });
});

<tr ng-repeat="cliente in buscador.clientes">
    <td><%= cliente.tipo.nombre %></td>
    <td><%= cliente.nombre %></td>
    <td><%= cliente.direccion  %></td>
    <td><%= cliente.telefono  %></td>
    <td><%= cliente.email  %></td>
    <td><%= cliente.rubro  %></td>
</tr>

app.controller('BuscadorClientesController', function($scope, Clientes){
    Clientes.getAll(function(data){
        $scope.clientes = data
        console.log($scope.clientes)
    });
});

<tr ng-repeat="cliente in clientes">
    <td><%= cliente.tipo.nombre %></td>
    <td><%= cliente.nombre %></td>
    <td><%= cliente.direccion  %></td>
    <td><%= cliente.telefono  %></td>
    <td><%= cliente.email  %></td>
    <td><%= cliente.rubro  %></td>
</tr>

html:

app.controller('BuscadorClientesController', function(Clientes){
    var vm = this;
    Clientes.getAll(function(data){
        vm.clientes = data;
        console.log(vm.clientes);
    });
});

<tr ng-repeat="cliente in buscador.clientes">
    <td><%= cliente.tipo.nombre %></td>
    <td><%= cliente.nombre %></td>
    <td><%= cliente.direccion  %></td>
    <td><%= cliente.telefono  %></td>
    <td><%= cliente.email  %></td>
    <td><%= cliente.rubro  %></td>
</tr>

app.controller('BuscadorClientesController', function($scope, Clientes){
    Clientes.getAll(function(data){
        $scope.clientes = data
        console.log($scope.clientes)
    });
});

<tr ng-repeat="cliente in clientes">
    <td><%= cliente.tipo.nombre %></td>
    <td><%= cliente.nombre %></td>
    <td><%= cliente.direccion  %></td>
    <td><%= cliente.telefono  %></td>
    <td><%= cliente.email  %></td>
    <td><%= cliente.rubro  %></td>
</tr>

我把我的代码改成了你的，但仍然不起作用：（@AlanM用

{cliente.tipo.nombre}}}

试试看，如果可以的话，告诉我，我会更新我的答案。不会的，我已经把$interpoleprovider.startSymbol和endSymbol改成了“”，因为我使用的是Laravel，它的模板引擎也使用了“{{”和“}”我找到了解决方案，检查一下