Question

我有一个简单的JSON file带有“客户”对象。

long unsigned int a;
 unsigned long int a;

基本上，当客户访问该页面时，我想使用Angular JS显示他自己的个人信息。所以，如下所示：

{
  "customers": [
    {
      "firstname": "John",
      "lastname": "Doe",
      "account": "123456",
      "amount": "$121.34",
      "period": "13th July - 13th August",
      "duedate": "14th September"
    },
    {
      "firstname": "Jack",
      "lastname": "Bauer",
      "account": "1111222",
      "amount": "$142.56",
      "period": "11th July - 11th August",
      "duedate": "16th September"
    }
  ]
}

我的JS文件是：

<h2>{{ customers.amount[0] }}</h2>
<p>{{ customers.period[0] }}</p>
<p>{{ customers.duedate[0] }}</p>

如何返回客户1的所有信息，然后客户2 ...？用过滤器重复ng是一种更好的方法吗？
确保客户查看他的信息（而不是其他人）的更好方法是什么？我不想在这里使用登录，所以我在考虑使用特定的URL来访问客户。还有什么好主意吗？

谢谢！

Answer 1

最好和最有效的方法是从后端API获取单个客户，因此您可以确保安全性和响应更小，因为您不需要获取所有客户，但如果您不能只获得一个客户更好的方法是通过一些密钥（id，cookie，帐户等）来过滤控制器中的客户

UtilityApp.controller('mainController', function($scope, $http) {

  $http({
   method: 'GET',
   url: 'https://jsonblob.com/26078b70-6b6f-11e7-a38a-bf689f57642c'
 }).then(function (data) {

    // create a message to display in our view
    $scope.accountId = 'getItSomehow';
    $scope.currentCustomer = data.customers.find(x => x.account === $scope.accountId);


  }), function () {
    return "Error";
  }

});


<h2>{{ currentCustomer.amount }}</h2>
<p>{{ currentCustomer.period }}</p>
<p>{{ currentCustomer.duedate }}</p>

ng-repeat with filter将是最慢和模糊的，不要这样做。

注意：看看数组.find https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/find，因为旧浏览器不支持它。

Answer 2

您从json blob请求json数据时遇到错误的URL。将正确的网址设为https://jsonblob.com/api/jsonBlob/26078b70-6b6f-11e7-a38a-bf689f57642c，即https://jsonblob.com/api/jsonBlob/<blobId>。

它将返回包含customers数组的JSON数据，然后您可以使用简单的ng-repeat来显示两个客户的数据。或者可以为读取阵列的单个客户提取特定数据。

Answer 3

您可以使用flex或<table>标记将客户信息设置为表格。

如果您想查看客户的信息，请将代码更改为此。

<h2>{{ customers.amount[0] }}</h2> // <h2>{{ customers[0].amount }}</h2>
<p>{{ customers.period[0] }}</p>   // <p>{{ customers[0].period }}</p>
<p>{{ customers.duedate[0] }}</p>  // <p>{{ customers[0].duedate }}</p>

或使用ng-repeat

<div ng-repeat="customer in customers">
    <h2>{{ customer.amount }}</h2>
    <p>{{ customer.period }}</p>
    <p>{{ customer.duedate }}</p>
</div>

但是，如果您想查看特定客户的信息，您应该在URL中传递ID作为参数，例如wit ui-router。

获取第二位客户的信息。例如：

http://www.exampleweb.com/customer/2

查看ui-router模块。 https://github.com/angular-ui/ui-router

Answer 4

我已将http请求的网址从https://jsonblob.com/26078b70-6b6f-11e7-a38a-bf689f57642c更改为https://jsonblob.com/api/jsonBlob/26078b70-6b6f-11e7-a38a-bf689f57642c。

另外，我修改了响应对象。它有包含客户对象的数据对象。

您可以使用某些过滤条件来识别客户。

var UtilityApp = angular.module('UtilityApp', []);

UtilityApp.controller('mainController', function($scope, $http) {
  $http({
   method: 'GET',
   url: 'https://jsonblob.com/api/jsonBlob/26078b70-6b6f-11e7-a38a-bf689f57642c'
 }).then(function (response) {
    $scope.customers = response["data"]["customers"];
    //Logic to identify the customer and then bind to $scope.currentCustomer
    $scope.account = "123456";
    $scope.currentCustomer = response.data.customers.find(x => x.account === $scope.account);
    
  }, function () {
    return "Error";
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="UtilityApp" ng-controller="mainController">
  <h1>Customer's Info</h1>
  <div>
    <h2>Account : {{ currentCustomer.account }}</h2>
    <p>Amount : {{ currentCustomer.amount }}</p>
    <p>Period : {{ currentCustomer.period }}</p>
    <p>DueDate : {{ currentCustomer.due_date }}</p>
  </div>
  
  
  <h1>Binding all customer using ng-repeat </h1>
  <div ng-repeat="customer in customers">
    <h2>{{ customer.amount }}</h2>
    <p>{{ customer.period }}</p>
    <p>{{ customer.due_date }}</p>
  </div>
</div>

Answer 5

如果您想一次显示一个特定用户，请不要使用ng-repeat。只需过滤响应数据或在服务器端创建服务，通过传递参数给出特定用途的响应目前您可以过滤回复

 var UtilityApp = angular.module('UtilityApp', []);

 UtilityApp.config(['$qProvider', function ($qProvider) {
            $qProvider.errorOnUnhandledRejections(false);
        }
    ]);

 UtilityApp.controller('mainController', function ($scope, $http) {

    $scope.customerAccountId = "123456";
    $scope.currentCustomer = null;
    $http({
        method : 'GET',
        url : 'https://jsonblob.com/26078b70-6b6f-11e7-a38a-bf689f57642c'
    }).then(function (data) {

        $scope.customers = data.customers;
        $scope.currentCustomer = $(x) => {
            return x.account === $scope.customerAccountId
        };

    }),
    function () {
        return "Error";
    }

 });

并显示 currentCustomer 详细信息：

<div>
  <p>{{ currentCustomer.amount }}</p>
  <p>{{ currentCustomer.period }}</p>
  <p>{{ currentCustomer.duedate }}</p>
</div>

Answer 6

//html
<div ng-repeat="obj in customers track by $index">
   <h2>{{ obj.amount }}</h2>
   <p>{{ obj.period }}</p>
   <p>{{ obj.duedate }}</p>
</div>

//controller
$scope.customers = [
   {
     "firstname": "John",
     "lastname": "Doe",
     "account": "123456",
     "amount": "$121.34",
     "period": "13th July - 13th August",
     "duedate": "14th September"
   },
   {
      "firstname": "Jack",
      "lastname": "Bauer",
      "account": "1111222",
      "amount": "$142.56",
      "period": "11th July - 11th August",
      "duedate": "16th September"
   }
];

如何使用Angular JS显示特定的JSON值？

6 个答案: