Question

嘿，我有一个关于使用ng-repeats的问题。我正在尝试在两个单独的容器中显示来自大型json文件的用户数据。当用户点击一行时，它会在另一部分显示另一部分ng-repeat。如果有人可以看看这个小提琴，也许给我一个方向，那将是非常棒的。谢谢！

我也在使用ngTable作为表格参数，但我认为这与这个问题没什么关系。

http://jsfiddle.net/cL5aE/1/

HTML：

<body>
  <div ng-controller="myController">
    <div class="col-md-6">
        <table>
            <tr ng-repeat="user in $data" ng-click="loadDetails()">
                <td>{{user.name}}</td>
                <td>{{user.id}}</td>
            </tr>
        </table>
    </div>
    <div class="col-md-6">
        <tr ng-repeat="user in $data" ng-show="loadDetails()">
            <td>{{user.foo}}</td>
            <td>{{user.bar}}</td>
        </tr>
    </div>
  </div>
</body>

控制器：

angular.module('app', ['ngTable']);


app.controller('myController', function ($scope, $http, ngTableParams) {

$http.get('http://myjson.com/data.json')
    .success(function (data, status) {

    $scope.tableParams = new ngTableParams({
        page: 1, // show first page
        count: 10, // count per page
        sorting: {
            CompleteDate: 'asc' // initial sorting
        }
    }, {
        total: data.length, // length of data
        getData: function ($defer, params) {
            // use build-in angular filter
            var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;

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

    });

});

  $scope.loadDetails = function(data) {
    //???
  }


});

Answer 1

我会将用户对象作为参数传递给函数并为其指定模型。这样，您不需要在两个部分中使用ng-repeat，从而产生更清晰，更易读的代码。

将您正在显示的对象传递给ng-repeat：

<tr ng-repeat="user in $data" ng-click="loadDetails(user)">

将对象加载到模型属性的函数：

$scope.loadDetails = function(user) {
     $scope.viewModel.selectedUser = user;
}

最后将模型属性分配给视图：

<table>
  <tr ng-show="viewModel.selectedUser">
     <td>{{viewModel.selectedUser.foo}}</td>
     <td>{{viewModel.selectedUser.bar}}</td>
  </tr>
</table>

http://jsfiddle.net/jimenezjrs/5Cd32/

在多个容器中显示ng-repeat中的Json数据

1 个答案: