Question

我正在使用angular创建作业门户。我有工作岗位列表。我想限制职位描述字符。如果点击＆＃34;更多＆＃34;链接它应该显示完整的描述。当我点击更多链接时我尝试了它然后它显示了所有工作职位描述。视图：

SELECT
    projects.id,
    `projects`.`project_name`,
    ( GROUP_CONCAT(DISTINCT `users`.`name`  separator ', ' ) ) AS staff
FROM projects -- was missing in the OP
INNER JOIN `projects_users` ON (`projects_users`.`project_id` = `projects`.`id` )
INNER JOIN `users` ON (`users`.`id` = `projects_users`.`user_id` ) 
GROUP BY projects.id -- Group by fixed here
HAVING (`projects_users`.`user_id` = 8)

controller.js

<div>
  <p class="para" ><b>Job Description</b> - {{job_list.job_description  | limitTo : limit}}
     <a href ng-click="change_length_value(job_post_listing.jobdata,$index)"> ...More
      </a>
  </p>
</div>

Answer 1

您可以使用js slice

来实现它

jobDescription.slice(0, $scope.limit);

这会将文本限制为所需的字符数

您还可以通过执行包含作业描述的div来使用css

width: 200px;// for example
overflow: hidden ;

Answer 2

这是重构的代码。

视图

 <div>
  <p class="para" ><b>Job Description</b> - {{job_list.job_description  | limitTo : job_list.show_full_desc ? job_list.job_description.length : limit}}
     <a href ng-click="change_length_value(job_list)"> ...More
      </a>
   </p>
 </div>

controller.js

    $scope.limit = 3;
    $scope.change_length_value = function(joblist){      
        //Toggle show_full_desc;
        joblist.show_full_desc = !joblist.show_full_desc;
    };

Answer 3

您的问题是，您修改了会影响所有行的公共$scope.limit。相反，您应该更改＆＃34; local＆＃34; limit - 仅针对点击的行。

＆＃13;

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.limit = 3;
  $scope.job_lists = [
    { job_description: '123456789012345678901234567890' },
    { job_description: '123456789012345678901234567890' },
    { job_description: '123456789012345678901234567890' }
  ]
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<div ng-app='app' ng-controller='ctrl'>
  <div ng-repeat='job in job_lists'>
    <p>{{job.job_description | limitTo : limit}}</p>
    <a href='#' ng-click='limit = job.job_description.length'> ...More</a>
    <hr>
  </div>
</div>

＆＃13;

如果点击更多链接如何显示有限的字符然后显示完整的详细信息？

3 个答案: