Question

我正在尝试在用户点击read more按钮时显示更多文字：

<md-content class="md-padding" layout-xs="column" layout="row" layout-wrap>
  <div flex-xs flex-gt-xs="50" layout="column" ng-repeat="paquete in paquetes">
    <md-card>
      <md-card-title layout="row" layout-xs="column">
        <md-card-title-media layout-margin>
          <img ng-src="{{paquete.img}}" class="md-card-image margin-auto" alt="image caption">
        </md-card-title-media>
        <md-card-title-text>
          <span class="md-headline blue">{{paquete.title}}</span>
          <span class="md-subhead dark-blue">{{paquete.desc | limitTo: limit.limit}}
             <span class="threedots" ng-show="mas.mas">... </span>
             <span style="cursor: pointer;" class="blue underlined" 
                ng-click="limitFunction(paquete.desc)">Leer 
                   <span class="mas" ng-show="mas.mas">más</span>
                   <span class="menos" ng-show="menos.menos">menos</span>.
             </span>
          </span>
        </md-card-title-text>
      </md-card-title>
    </md-card>
  </div>    
</md-content>

我限制了初始描述{{paquete.desc | limitTo: limit.limit}}并让用户点击阅读更多ng-click="limitFunction(paquete.desc)"

我的控制器：

$scope.limit = {limit: 200};

$scope.limitFunction = function (desc) {
    $scope.limit.limit = desc.length;
};

但是当我点击其中一个ng-repeat元素时，$scope.limit会改变所有这些元素，而不是我点击的那个。

如何将$scope.limit更改为仅我点击的那个？

Answer 1

您可以对paquete对象设置限制并将其传递到限制函数

 <span class="md-subhead dark-blue">{{paquete.desc | limitTo: paquete.limit}}<span class="threedots" ng-show="mas.mas">... </span><span style="cursor: pointer;" class="blue underlined" ng-click="limitFunction(paquete)">Leer <span class="mas" ng-show="mas.mas">más</span><span class="menos" ng-show="menos.menos">menos</span>.</span></span>

在控制器中：

$scope.limitFunction = function (paquete) {
    paquete.limit = paquete.desc.length;
};

仅为一个ng-repeat文档angularjs更改变量

1 个答案: