Обновление текстовое содержимое элемента

Question

тд

В этой скрипкой я пытаюсь разрешить пользователю просматривать несколько символов текста с HTML элемента с «Показать больше» щёлкнули:

http://jsfiddle.net/7og42xxf/25/

ЦСИ:

<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) 
    } 

}); 

Но я не уверен, как вводить лишние текстовые символы. В настоящее время я просто получить доступ к идентификатор элемента и вывода на консоль:

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

Как вывести множество остальной тд элемента текста, когда «Show More» нажата?

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>