AngularJS 过滤以比较日期与 ID - ng-show

Question

我正在和 Angular JS，PHP/MYSQL 一起做今天的励志名言。我在数据库中有 31 个报价，每个月的每一天。我如何使用 ng-show 或 ng-hide 并将其与今天和 post ID 进行比较以显示匹配的 post？例如，今天我们是第三个，所以我的脚本会调用 post ID 3.

这是我的 app.js:

var app = angular.module('myApp',[]);
app.controller('quotesCtrl', function($scope, $http) {
  $http.post('ajax/getQuotes.php').success(function(data){
    $scope.quotes = data;
  });

});

更新！

谢谢彼得，我已经快要完成这项工作了！我做了 var_dump($arr);

真正擅长 PHP 的人，我为粗略的编码道歉。她是我的 getQuotes.php PHP 档案：

<?php
include('../includes/config.php');

$query="select id,quote from quotes order by id desc";
$result = $mysqli->query($query) or die($mysqli->error.__LINE__);

$arr = array();

if($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $arr[] = $row;  
    }
}
unset($arr[0]);

$numItems = count($arr);
$i = 0;

foreach($arr as $key => $value ){
    if(++$i === $numItems) {
        echo "$key: '$value[quote]' ";
      }else{
    echo "$key: '$value[quote]', ";
    }
}
echo "<pre>";
var_dump($arr);
//var_dump($arr);

# JSON-encode the response
//$json_response = json_encode($arr);

// # Return the response
//echo $json_response;


?>

我的 app.js 文件是：

var app = angular.module('app',[]);
app.controller('TimeCtrl', function($scope, $filter, $http) {
  $http.post('ajax/getQuotes.php').success(function(data){
    $scope.quotes = data;
  });
   $scope.dayNumber = $filter('date')(new Date(), 'd');
   console.log($http);
});

我得到的是：

3 
'

而不是得到：

3
its the third day of the month

*** 更新 2 ****

在 app.js 中，以下函数出错：

$timeout(function() {
          // Parse the JSON
          $scope.quotes = JSON.parse(data);
      })

错误说：

 SyntaxError: Unexpected token o
    at Object.parse (native)

当我将函数更改为 stringify 时：

$timeout(function() {
          var jsonString = JSON.stringify( data );

          $scope.quotes = jsonString;
          console.log($scope.quotes);
      })

错误消失但输出仍然不正确，就像我做的那样 console.log($scope.quotes);我得到：

{"1":{"id":"3","quote":"its the third day of the month"},"2":{"id":"2","quote":"its the second day of the month"},"3":{"id":"1","quote":"its the first day of the month"}}

**** 更新 2 ********

我按照 Peter 的建议更新了函数，错误消失了，所以 app.js 看起来像这样：

var app = angular.module('app',[]);
app.controller('TimeCtrl', function($scope, $filter, $http, $timeout) {
  $http.post('ajax/getQuotes.php').success(function(data){
    //$scope.quotes = data;

// This triggers a 'digest', to tell the views to update.
      $timeout(function() {
          console.log(data);
        $scope.quotes = data;
      })

  });
   $scope.dayNumber = $filter('date')(new Date(), 'd');
});

然而，输出看起来像 json，请看下面的截图：

3 
{"id":"1","quote":"its the first day of the month"}

这是上面截图的特写，应该更容易阅读：

Answer 1

使用 angularJS 内置日期过滤器。这是一个可以使事情变得简单的工作示例：

http://plnkr.co/edit/X1k3nQdYi9K1zfP2yfR6?p=preview

代码：

<html>

<head>
  <meta charset="UTF-8" />
  <title>require moment</title>
</head>

<body ng-app="app">
  <div ng-controller="TimeCtrl">
    <p>
      {{dayNumber}}
      <br />{{quotes[dayNumber]['quote']}}
    </p>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
  <script>
    angular.module("app", [])
      .controller("TimeCtrl", function($scope, $filter) {
        $scope.quotes = {
          1: 'Its the first of the month',
          2: 'Its the second of the month',
          3: 'Its the third of the month',
          4: 'Its the fourth of the month',
          5: 'Its the fifth of the month',
          6: 'Its the sixth of the month'
        }
        $scope.dayNumber = $filter('date')(new Date(), 'd');
      });
  </script>
</body>

</html>

输出为：

4 
Its the fourth of the month

===========

添加PHP代码和AngularJS后：

你应该回去使用 json_encode，不要尝试自己动手。请记住在 javascript:

中对其进行解码

/*
foreach($arr as $key => $value ){
    if(++$i === $numItems) {
        echo "$key: '$value[quote]' ";
      }else{
    echo "$key: '$value[quote]', ";
    }
}

echo "<pre>";
var_dump($arr);
*/
//var_dump($arr);

# JSON-encode the response
$json_response = json_encode($arr);

// # Return the response
echo $json_response;

不要忘记在检索到 JSON 字符串后将其解码为 javascript 对象：

var app = angular.module('app',[]);
app.controller('TimeCtrl', function($scope, $filter, $http, $timeout) {
  $http.post('ajax/getQuotes.php').success(function(data){
      // This triggers a 'digest', to tell the views to update.
      $timeout(function() {
          // Parse the JSON
          $scope.quotes = JSON.parse(data);
      })
  });
  $scope.dayNumber = $filter('date')(new Date(), 'd');

   // Also, this won't do anything sensible
   console.log($http);
});

最后，如果结果绑定到视图并且您需要看到它更新，您应该将更改包装在 $timeout 中或调用 $rootScope.$apply，见上文。

AngularJS 过滤以比较日期与 ID - ng-show

AngularJS filter to compare day with ID - ng-show

javascript

angularjs