Angularjs Читать больше или меньше текстовая кнопка частично работает - PullRequest
Новая
       0

Angularjs Читать больше или меньше текстовая кнопка частично работает

0 голосов
/ 05 июня 2018

Код ниже использовался для отображения трех записей / строк содержимого базы данных с помощью angularjsК каждой отображаемой строке / данным прикреплена кнопка ReadMore или ReadLess.

Проблема, с которой я столкнулся сейчас, заключается в том, что, когда я нажимаю на кнопку readmore первого сообщения, она расширяет все остальные строки / запись базы данных (т. Е. Secondи третьи строки / пост также были расширены.)

Я учил добавлять что-то вроде {{post.id}}, чтобы гарантировать, что затронут только пост «Читать дальше», но не знаю, где его можно реализовать.Может ли кто-нибудь помочь мне с этим. 

<!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>

Ответы [ 3 ]

0 голосов
/ 05 июня 2018

Сначала вам нужно добавить numLimit к каждому сообщению, а не к области.Вы можете сделать это в PHP, когда вы выбираете сообщения, или вы можете сделать это в вашем контроллере в вашей функции успеха.Поскольку вы используете $scope для каждого сообщения, все, что вы делаете с $scope.numLimit, будет делать это для всех сообщений.Добавив numLimit к каждому сообщению в javascript или php, вы можете обновить функции 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
0 голосов
/ 05 июня 2018

Проблема в том, что $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;
        });

    });
}
0 голосов
/ 05 июня 2018

Почему у вас возникла проблема:

Число 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...