迭代 ng-repeat

Question

我正在尝试弄清楚如何在 angular 中调用变量。我是 angularjs 的新手，似乎无法弄清楚为什么在第一个示例中我们在 ng-repeat 'group in $groups' 中迭代，而在第二个示例中我们在 'user in $data' 中迭代，我不能似乎弄清楚了 $groups 和 $data 的来源以及为什么我不能更改两个示例中的名称并保持它的工作，所以我现在可以在我自己的示例中如何调用它们。

第一个例子：http://plnkr.co/edit/CBcbkc?p=preview

var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, $filter, ngTableParams) {
    var data = [{name: "Moroni", age: 50, role: 'Administrator'},
                {name: "Tiancum", age: 43, role: 'Administrator'},
                {name: "Jacob", age: 27, role: 'Administrator'},
                {name: "Nephi", age: 29, role: 'User'},
                {name: "Enos", age: 34, role: 'User'}];

    $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10          // count per page
    }, {
        groupBy: 'role',
        total: data.length,
        getData: function($defer, params) {
            var orderedData = params.sorting() ?
                    $filter('orderBy')(data, $scope.tableParams.orderBy()) :
                    data;

            $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    });
})

  
    <table ng-table="tableParams" class="table">
<tbody ng-repeat="group in $groups">
    <tr class="ng-table-group">
        <td colspan="{{$columns.length}}">
            <a href="" ng-click="group.$hideRows = !group.$hideRows">
                <span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
                <strong>{{ group.value }}</strong>
            </a>
        </td>
    </tr>
    <tr ng-hide="group.$hideRows" ng-repeat="user in group.data">
        <td sortable="name" data-title="'Name'">
            {{user.name}}
        </td>
        <td sortable="age" data-title="'Age'">
            {{user.age}}
        </td>
    </tr>
</tbody>
</table>

第二个例子：http://plnkr.co/edit/HUe0e1zBGOG9oOyqpGq9?p=preview

var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, $filter, ngTableParams) {
    $scope.myValues = [{name: "Moroni", age: 50},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34}];

    $scope.tableParams = new ngTableParams({
        sorting: {
            name: 'asc'     
        }
    }, {
        getData: function($defer, params) {
            $defer.resolve($filter('orderBy')($scope.myValues, params.orderBy()));
        }
    });
});

  
    <button ng-click="tableParams.sorting({})" class="btn btn-default pull-right">Clear sorting</button>
    <p><strong>Sorting:</strong> {{tableParams.sorting()|json}}

    <table ng-table="tableParams" class="table">
        <tr ng-repeat="user in $data">
            <td data-title="'Name'" sortable="'name'">
                {{user.name}}
            </td>
            <td data-title="'Age'" sortable="'age'">
                {{user.age}}
            </td>
        </tr>
    </table>

Answer 1

如果您想了解变量和 angular 的一般工作原理，THIS 是一个很好的教程。

如果您想弄清楚为什么不能更改示例中的名称，答案是您正在使用由 this guy 创建的名为 ng-table 的自定义指令在处理 angular 中的 table 时让生活更轻松一些。例如，如果您想 "group"。所以 $data 和 $groups 是其中的一部分。

在您的示例中，您创建了一个变量，其中包含一组名为 "myValues" 的对象。该变量存在于范围内。您可以在 html 中访问该数据，并使用 angular 中的 ng-repeat，如下所示：

<table class="table">
        <tr ng-repeat="user in myValues">
            <td data-title="'Name'" sortable="'name'">
                {{user.name}}
            </td>
            <td data-title="'Age'" sortable="'age'">
                {{user.age}}
            </td>
        </tr>
 </table>

请注意，您将不再使用指令 "ng-table." 用户在 html 中与您的 ng-repeat 一起定义，您可以轻松地将其称为 "righteousDude in myValues" 或 "guy in myValues".

<table class="table">
       <tr ng-repeat="righteousDude in myValues">
            <td data-title="'Name'" sortable="'name'">
                 {{righteousDude.name}}
            </td>

如果您想要更改数据名称，您可以在 .js 文件中定义它的地方进行更改。

$scope.righteousDudes = [{name: "Moroni", age: 50},
                {name: "Tiancum", age: 43},.....ect

请记住 ng-repeat 是一个 angular 指令 "instantiates a template once per item from a collection"

以及您在 ng-repeat 中创建的变量...即"user" 表示该项目。希望对您有所帮助！

迭代 ng-repeat

Iterate on ng-repeat

angularjs

angularjs-scope

angularjs-ng-repeat

ngtable