Question

我是AngularJS的新手，我正在尝试设计一个新闻门户网站，用户点击新闻标题，它会显示相关新闻。

我的HTML：

<table class='table'>
   <tr ng-repeat="newx in news.info  | filter:search">
   <td> 
      <h3> <a ng-click="show_sm(newx.newslinkText)">{{newx.newslinkText}}</a> </h3>
          <p> {{newx.newsText}}  </p>
   </td>
</tr>
</table>

我的JS控制器::

$scope.show_sm = function(str) {

   //$scope.news=
}

我该怎么做？

Answer 1

您可以使用ng-show有条件地显示新闻内容：

HTML：

<table class='table'>
   <tr ng-repeat="newx in news.info  | filter:search">
   <td> 
      <h3> <a ng-click="show_sm(newx)">{{newx.newslinkText}}</a> </h3>
          <p ng-show="selected == newx"> {{newx.newsText}}  </p>
   </td>
</tr>
</table>

JS：

如果当前选择了新闻，则仅显示新闻内容：

$scope.show_sm = function(newx) {
   $scope.selected = newx;
}

Answer 2

我强烈建议使用这个。

<table class='table'>
   <tr ng-repeat="newx in news.info  | filter:search">
     <td> 
      <h3> <a ng-click="show_sm(newx.newslinkText)">{{newx.newslinkText}}</a> </h3>
          <p ng-if="newx.selected> {{newx.newsText}}  </p>
     </td>
   </tr>
</table>

在你应该具备的功能中：

 $scope.show_sm = function(newx) {
      // At first click it will  be ! of false which is true and it will display the content
      $scope.newx.selected = !$scope.newx.selected;
   }

显示类似项目的ng-click

2 个答案: