Angularjs 如何在角度数据表中仅显示一行？

我是angularjs的新手，我有25行要显示，但是第一次加载时我尝试只显示一行，会有一个展开按钮来显示其余的行，然后单击展开我想显示所有的行。 这是代码

    <table>
      <tbody>
         <tr ng-repeat="x in names">
          <td>{{x}}</td>
         </tr>
      </tbody>
   </table>

{{x}

您可以使用：

<div ng-repeat="x in names | limitTo: limit">
    <p>{{x}}</p>
</div>

{{x}

$scope.limit=1

在ng click上，您可以设置您的限制，如：ng click='limit=names.length'

您可以使用：

<div ng-repeat="x in names | limitTo: limit">
    <p>{{x}}</p>
</div>

{{x}

$scope.limit=1

在ng click上，您可以设置您的限制，如：ng click='limit=names.length'

//数组的角度“切片”过滤器
var-app=angular.module（'myApp'，[]）；
app.filter（'slice'，function（）{
返回功能（arr、开始、结束）{
返回arr.slice（开始、结束）；
};
});
应用控制器（'MainController'，功能（$scope）{
$scope.offset=1；
$scope.items=[1,2,3,4,5,6,7,8,9,10,11,12,13,14]；
});


{{item}

扩大

//数组的角度“切片”过滤器
var-app=angular.module（'myApp'，[]）；
app.filter（'slice'，function（）{
返回功能（arr、开始、结束）{
返回arr.slice（开始、结束）；
};
});
应用控制器（'MainController'，功能（$scope）{
$scope.offset=1；
$scope.items=[1,2,3,4,5,6,7,8,9,10,11,12,13,14]；
});


{{item}

扩大
这是您可以尝试的

<div ng-init="limit= 1">
    <button ng-click="limit=names.length">View</button>
    <table>
        <tbody>
           <tr ng-repeat="x in names | limitTo: limit">
                <td>{{x}}</td>
           </tr>
        </tbody>
    </table>
</div>


看法
{{x}

这是您可以尝试的

<div ng-init="limit= 1">
    <button ng-click="limit=names.length">View</button>
    <table>
        <tbody>
           <tr ng-repeat="x in names | limitTo: limit">
                <td>{{x}}</td>
           </tr>
        </tbody>
    </table>
</div>


看法
{{x}

尝试过滤器：

limito
过滤器返回仅包含指定数量元素的数组或字符串

语法：

{{ object | limitTo : limit }}

var app = angular.module('myApp', []);
app.controller('MyCtrl',function($scope) {
    $scope.elements = ["1", "2", "3", "4", "5"];
  $scope.limit = 1;
});

<button ng-click="limit=elements.length">Expand More</button>
<table>
  <tr ng-repeat="item in elements | limitTo: limit">
     <td>{{item}}</td>
  </tr>
</table>

根据要求：

Js:

{{ object | limitTo : limit }}

var app = angular.module('myApp', []);
app.controller('MyCtrl',function($scope) {
    $scope.elements = ["1", "2", "3", "4", "5"];
  $scope.limit = 1;
});

<button ng-click="limit=elements.length">Expand More</button>
<table>
  <tr ng-repeat="item in elements | limitTo: limit">
     <td>{{item}}</td>
  </tr>
</table>

Html:

{{ object | limitTo : limit }}

var app = angular.module('myApp', []);
app.controller('MyCtrl',function($scope) {
    $scope.elements = ["1", "2", "3", "4", "5"];
  $scope.limit = 1;
});

<button ng-click="limit=elements.length">Expand More</button>
<table>
  <tr ng-repeat="item in elements | limitTo: limit">
     <td>{{item}}</td>
  </tr>
</table>

展开更多
{{item}}

工作小提琴：
尝试过滤器：

limito
过滤器返回仅包含指定数量元素的数组或字符串

语法：

{{ object | limitTo : limit }}

var app = angular.module('myApp', []);
app.controller('MyCtrl',function($scope) {
    $scope.elements = ["1", "2", "3", "4", "5"];
  $scope.limit = 1;
});

<button ng-click="limit=elements.length">Expand More</button>
<table>
  <tr ng-repeat="item in elements | limitTo: limit">
     <td>{{item}}</td>
  </tr>
</table>

根据要求：

Js:

{{ object | limitTo : limit }}

var app = angular.module('myApp', []);
app.controller('MyCtrl',function($scope) {
    $scope.elements = ["1", "2", "3", "4", "5"];
  $scope.limit = 1;
});

<button ng-click="limit=elements.length">Expand More</button>
<table>
  <tr ng-repeat="item in elements | limitTo: limit">
     <td>{{item}}</td>
  </tr>
</table>

Html:

{{ object | limitTo : limit }}

var app = angular.module('myApp', []);
app.controller('MyCtrl',function($scope) {
    $scope.elements = ["1", "2", "3", "4", "5"];
  $scope.limit = 1;
});

<button ng-click="limit=elements.length">Expand More</button>
<table>
  <tr ng-repeat="item in elements | limitTo: limit">
     <td>{{item}}</td>
  </tr>
</table>

展开更多
{{item}}

工作小提琴：
通过在控制器中设置范围变量并在ng repeat中过滤来限制行

脚本：

var app = angular.module('myApp', []);
app.controller('limitCtrl',function($scope) {    
  $scope.limitNumber = 1;
});

Html:

<table>
      <tbody>
         <tr ng-repeat="x in names | limitTo: limitNumber">
          <td>{{x}}</td>
         </tr>
      </tbody>
   </table>


{{x}
通过在控制器中设置范围变量并在ng repeat中过滤来限制行

脚本：

var app = angular.module('myApp', []);
app.controller('limitCtrl',function($scope) {    
  $scope.limitNumber = 1;
});

Html:

<table>
      <tbody>
         <tr ng-repeat="x in names | limitTo: limitNumber">
          <td>{{x}}</td>
         </tr>
      </tbody>
   </table>


{{x}
您要扩展什么？问题不是clear@AlpeshPrajapati我想首先显示一行，将有一个展开按钮，单击它我需要显示其余的行。@user3932103工作Plnkr代码-如果这是您正在查找的，请告诉我for@swapnesh我在tr中有四个tds，它不与表行一起工作。您要扩展什么？问题不是clear@AlpeshPrajapati我想首先显示一行，将有一个展开按钮，单击它我需要显示其余的行。@user3932103工作Plnkr代码-如果这是您正在查找的，请告诉我for@swapnesh我在tr中有四个tds，它不适用于表行。如果要在任何展开按钮上显示剩余元素，则@user3932103我已修改代码供您参考。如果要在任何展开按钮上显示剩余元素，则@user3932103我已修改代码供您参考。如果是键值对，则limito不是wokring，还有其他的方法吗？你能给出示例代码吗？我无法理解如果它是键值对，Limito不是wokring，还有其他方法吗？您能展示示例代码吗？I’我不懂