迭代 ng-repeat

Question

我试图弄清楚变量是如何以角度调用的。我是 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

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

如果您想弄清楚为什么不能更改示例中的名称，答案是您正在使用由 this guy 创建的名为 ng-table 的自定义指令，以便在处理时更轻松有角度的桌子。例如，如果您想“分组”。所以 $data 和 $groups 是其中的一部分。

在您的示例中，您创建了一个变量，其中包含一个名为“myValues”的对象集合。该变量存在于范围内。您可以在 html 中访问该数据，并使用 ng-repeat 从 Angular 像这样：

<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 是一个角度指令，它“从集合中为每个项目实例化一次模板”

以及您在 ng-repeat 中创建的变量...即“用户”代表该项目。希望对您有所帮助！