Question

我试图找出如何以角度调用变量。我是angularjs的新手，似乎无法弄清楚为什么在第一个例子中我们在$ groups＆＃39;中的ng-repeat＆＃39;组中进行迭代。在第二个例子中，我们正在迭代$ data＆＃39;中的用户，我似乎无法弄清楚$ groups和$ data来自何处以及为什么我无法更改两个示例中的名称并保持其工作，所以我现在可以用我自己的例子来称呼它们。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

如果你想弄清楚变量和角度的工作原理，THIS是一个很棒的教程。

如果你想弄清楚为什么你不能改变你的例子中的名字，答案就是你正在使用一个名为ng-table的自定义指令来创建this guy，让生活变得更轻松处理角度表时。就像你想要“分组”一样。所以$ data和$ groups就是其中的一部分。

在您的示例中，您创建了一个变量，其中包含一组名为“myValues”的对象。该变量存在于范围内。您可以在html中访问该数据，并使用角度的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”。用你的ng-repeat在html中定义用户，你可以轻易地称它为“myValues中的righteousDude”或“myValues中的man”。

<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中创建的变量...即。 “user”表示该项目。希望有所帮助！

迭代ng-repeat

1 个答案: