Question

下面的代码用于使用angularjs显示三个数据库内容的帖子/行。每个显示的行/数据都附有ReadMore或ReadLess按钮。

现在的问题是，当我点击第一篇文章的readmore按钮时，它会扩展所有其他数据库行/帖子（即第二行和第三行/帖子也被扩展）。

我已经教过添加{{post.id}}这样的内容，以确保只有点击Readmore帖子受到影响，但不知道它可以在哪里实现。有人可以帮助我。

<!doctype html>
<html>

<head>
  <link href="style.css" type="text/css" rel="stylesheet" />

  <!--read more text starts here-->

  <!--read more text ends-->

</head>

<body ng-app='myapp'>
  <div class="content" ng-controller='fetchCtrl'>
    <div class="post" ng-repeat='post in posts'>

      <h1>{{ post.title }}</h1>
      {{ post.id }}<br> 
      {{ post.content | limitTo:numLimit }}
      <div class="post-text">

        <button type='button' ng-click="readMore()">read more</button>
        <button type='button' ng-click="readLess()">read less</button>

      </div>
    </div>
  </div>

  <!-- Script -->
  <script src="angular.min.js"></script>
  <script>
    var fetch = angular.module('myapp', []);
    fetch.controller('fetchCtrl', ['$scope', '$http', function($scope, $http) {

        // read more or less text starts here
        $scope.numLimit = 200;
        $scope.readMore = function() {
          $scope.numLimit = 10000;
        };

        $scope.readLess = function() {
          $scope.numLimit = 200;
        };

        // // read more or less text ends here

        // Fetch post data
        $scope.getPosts = function() {

          $http({
            method: 'post',
            url: 'likeunlike.php',
            data: {
              request: 1
            }
          }).then(function successCallback(response) {

            $scope.posts = response.data;
          });
        }
        $scope.getPosts(); // Fetch post data
      }
    ]);
  </script>

</body>

</html>

Answer 1

首先，您需要为每个帖子而不是范围添加numLimit。您可以在获取帖子时在PHP中执行此操作，也可以在成功函数中的控制器中执行此操作。由于您对每个帖子都使用$scope，因此您对$scope.numLimit所做的任何操作都会对所有帖子进行操作。在javascript或php中为每个帖子添加numLimit后，您可以更新html以及readMore()和readLess()个功能。

在html中，我们会切换limitTo以使用post.numLimit值，然后将帖子传递到您的readMore和readLess函数。

<强> html的

<!-- most code left out for brevity -->
<div class="post" ng-repeat='post in posts'>

    <h1>{{ post.title }}</h1>
    {{ post.id }}<br> 
    {{ post.content | limitTo:post.numLimit }}
    <div class="post-text">

        <button type='button' ng-click="readMore(post)">read more</button>
        <button type='button' ng-click="readLess(post)">read less</button>

    </div>
</div>

在javascript中，我们会切换两个函数来更新帖子上的numLimit，而不是scope。我们还会使用较低的numLimit初始化每个帖子。

<强>的.js

// read more or less text starts here
//$scope.numLimit = 200; - can remove this
$scope.readMore = function(post) {
    post.numLimit = 10000;
};

$scope.readLess = function(post) {
    post.numLimit = 200;
};

// read more or less text ends here

// Fetch post data
$scope.getPosts = function() {

    $http({
        method: 'post',
        url: 'likeunlike.php',
        data: {
            request: 1
        }
    }).then(function successCallback(response) {

        $scope.posts = response.data;

        // this will initialize all posts to the lower numLimit
        angular.forEach($scope.posts, function(post){
            post.numLimit = 200;
        })

    });
}

$scope.getPosts(); // Fetch post data

Answer 2

您遇到的问题是因为$scope.numLimit是整个控制器范围的字段，而不是每个帖子的字段。要为每个帖子执行此操作，您需要以下内容：

//JS code
$scope.readMore = function(post) {
          post.numLimit = 10000;
        };

        $scope.readLess = function(post) {
          post.numLimit = 200;
        };

//HTML code
<button type='button' ng-click="readMore(post)">read more</button>
<button type='button' ng-click="readLess(post)">read less</button>

你显然需要为某个地方的每个帖子初始化numLimit（也许在succesCallback中），但基本上就是这样。虽然我更喜欢为服务器端的每个元素设置初始化，但这是在客户端上执行此操作的一种方法：

// Fetch post data
$scope.getPosts = function() {

    $http({
        method: 'post',
        url: 'likeunlike.php',
        data: {
            request: 1
        }
    }).then(function successCallback(response) {

        $scope.posts = response.data;

        $scope.posts.forEach(function(post){
            post.numLimit = 200;
        });

    });
}

Answer 3

您为什么遇到问题：

数字numLimit对于您的所有帖子都是唯一的，因此当您点击任何帖子的“readMore（）”时，它会更新每个帖子使用的变量，这就是您遇到问题的原因。

如何修复 我建议你在每个帖子中添加一个名为numLimit的变量，这样每个帖子都有自己的“numLimit”。当您点击“readMore（）”时，您将传递帖子并更改号码。

我在下面修改了你的代码：2个更改：

getPosts在帖子上迭代以向每个帖子添加numLimit
readMore / readLess现在将当前帖子作为参数

<!doctype html>
<html>

<head>
  <link href="style.css" type="text/css" rel="stylesheet" />

  <!--read more text starts here-->

  <!--read more text ends-->

</head>

<body ng-app='myapp'>
  <div class="content" ng-controller='fetchCtrl'>
    <div class="post" ng-repeat='post in posts'>

      <h1>{{ post.title }}</h1>
      {{ post.id }}<br> 
      {{ post.content | limitTo:post.numLimit }}
      <div class="post-text">

        <button type='button' ng-click="readMore(post)">read more</button>
        <button type='button' ng-click="readLess(post)">read less</button>

      </div>
    </div>
  </div>

  <!-- Script -->
  <script src="angular.min.js"></script>
  <script>
    var fetch = angular.module('myapp', []);
    fetch.controller('fetchCtrl', ['$scope', '$http', function($scope, $http) {

        // read more or less text starts here
        $scope.readMore = function(post) {
          post.numLimit = 10000;
        };

        $scope.readLess = function(post) {
          post.numLimit = 200;
        };

        // // read more or less text ends here

        // Fetch post data
        $scope.getPosts = function() {

          $http({
            method: 'post',
            url: 'likeunlike.php',
            data: {
              request: 1
            }
          }).then(function successCallback(response) {

            $scope.posts = response.data;
            
            for ( let post of posts ) {
               post.numLimit = 200;
            }
            
          });
        }
        $scope.getPosts(); // Fetch post data
      }
    ]);
  </script>

</body>

</html>

Angularjs阅读更多或更少的文本按钮部分工作

3 个答案: