Question

在这个小提琴中，我试图允许用户查看带有“显示更多”的html元素的更多文本字符：

src：

<div ng-app="test">

        <div ng-controller="ShoppingCartCtrl">        

            <br />

            <table>

            </table>
            <br />
            <table border="1">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Price</th>
                        <th>Quantity</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in items">
                        <td ng-bind-html="item.Name">{{truncate(item.Name) }} <a id="id+$index" href ="#" ng-click="showMore('test'+$index)">Show More</a></td>
                        <td>{{item.Price }}</td>
                        <td>{{item.Quantity}}</td>
                    </tr>
                </tbody>
            </table>
            <br />
</div>
</div>

.bold { font-weight:bold; }

table td{
    padding: 10px;
}

table th{
    font-weight: bold;
    text-align: center;
}

var modul = angular.module("test", []);

modul.controller('ShoppingCartCtrl', function($scope , $document)  {

        $scope.items = [
            {Name: "Soap", Price: "25", Quantity: "10"},
            {Name: "Shaving cream", Price: "50", Quantity: "15"},
            {Name: "Shampoo", Price: "100", Quantity: "5"}
        ];

   $scope.showMore = function(item){
    console.log(item)
   }

   $scope.truncate = function(item){
    return item.substring(0 , 2)
   }

});

但我不确定如何注入额外的文字字符。目前我只是访问id元素并输出到控制台：

   $scope.showMore = function(item){
    console.log(item)
   }

单击“显示更多”时如何输出设置剩余的td元素文本？

Answer 1

您可以使用ng-show / ng-hide指令，请参阅下面的演示。

var modul = angular.module("test", []);

modul.controller('ShoppingCartCtrl', function($scope, $document) {

  $scope.items = [{
    Name: "Soap",
    Price: "25",
    Quantity: "10"
  }, {
    Name: "Shaving cream",
    Price: "50",
    Quantity: "15"
  }, {
    Name: "Shampoo",
    Price: "100",
    Quantity: "5"
  }];

  $scope.showMore = function(item) {
    console.log(item)
  }

  $scope.truncate = function(item) {
    return item.substring(0, 2)
  }

});

.bold {
    font-weight:bold;
}
table td {
    padding: 10px;
}
table th {
    font-weight: bold;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="test">
  <div ng-controller="ShoppingCartCtrl">
    <br />
    <table></table>
    <br />
    <table border="1">
      <thead>
        <tr>
          <th>Name</th>
          <th>Price</th>
          <th>Quantity</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in items">
          <td ng-bind-html="item.Name">
            <span ng-hide="item.more">{{truncate(item.Name) }}</span>
            <a ng-hide="item.more" ng-click="item.more =!item.more">Show More</a>
            <span ng-show="item.more">{{item.Name}}</span>
            <a ng-show="item.more" ng-click="item.more =!item.more">Show Less</a>
          </td>
          <td>{{item.Price }}</td>
          <td>{{item.Quantity}}</td>
        </tr>
      </tbody>
    </table>
    <br />
  </div>
</div>

更新td元素的文本内容

1 个答案: