使用 ng-repeat 和从导航传递的索引值更新数据集中子项的列表

Question

我已经使用 ng-repeat 显示了我的数据集中的项目列表，如下所示。

<li ng-repeat="item in adults[1].children">
    {{item.childName}}
</li>

我想做的是如何使用这样的导航动态更新列表以显示其他子项 -

<li ng-click="updateList(1)">First kids</li>
<li ng-click="updateList(2)">Second group of kids</li>
<li ng-click="updateList(3)">Third group of kids</li>

数据集

  $http.get('data/parents-data.json')
    .then(function(res) {
        $scope.adults= res.data;
  });

  [
      {
        "parentName": "Jim",
        "age": "32",
        "sex": "M",
        "children": [
            {"childName": "Jennifer"},
            {"childName": "Timmy"}
        ]
      },
      {
        "parentName": "Barbara",
        "age": "29",
        "sex": "F",
        "children": [
            {"childName": "Oliver"},
            {"childName": "Henry"},
            {"childName": "Jane"}
        ]
      },
      {
        "parentName": "Sue",
        "age": "40",
        "sex": "F",
        "children": [
            {"childName": "William"},
            {"childName": "Robyn"},
            {"childName": "Sarah"}
        ]
      }
    ]

我真的很困惑如何将 updateList 函数return 索引返回到 ng-repeat

我试过了

$scope.updateList = function(val) {
    return adults[x].children;
}

有

<li ng-repeat="item in updateList()>
{{item.childName}}
</li>

但是这个显然没有用。我只是想不明白这一点。也许我做错了。非常感谢任何帮助:)

Answer 1

您可以在 $scope 上创建一个新变量来跟踪要显示的子项。然后我们可以创建一个函数来更新这个组。见下文

在你的控制器中

$scope.children = $scope.adults[0]; // Default to the first group
$scope.updateGroup = function(newGroupNumber) {
    $scope.children = $scope.adults[newGroupNumber];
};

然后在您的模板中：

<li ng-repeat="child in children>
      {{child.childName}}
</li>
...
<li ng-click="updateGroup(1)">First kids</li>
<li ng-click="updateGroup(2)">Second group of kids</li>
<li ng-click="updateGroup(3)">Third group of kids</li>

Answer 2

您只需创建一个新的 $scope 变量并在 ng-click 上更新它以更改子项列表。

//Default set of children
 $scope.childrens=$scope.adults[0].children;

//Update childrens variable on click
 $scope.updateList = function(x) {
    $scope.childrens=$scope.adults[x].children;
}

var app=angular.module("App",[]);
app.controller("AppCtrl",function($scope){
$scope.adults = [
      {
        "parentName": "Jim",
        "age": "32",
        "sex": "M",
        "children": [
            {"childName": "Jennifer"},
            {"childName": "Timmy"}
        ]
      },
      {
        "parentName": "Barbara",
        "age": "29",
        "sex": "F",
        "children": [
            {"childName": "Oliver"},
            {"childName": "Henry"},
            {"childName": "Jane"}
        ]
      },
      {
        "parentName": "Sue",
        "age": "40",
        "sex": "F",
        "children": [
            {"childName": "William"},
            {"childName": "Robyn"},
            {"childName": "Sarah"}
        ]
      }
    ];
    $scope.childrens=$scope.adults[0].children;
    $scope.updateList = function(x) {
     $scope.childrens=$scope.adults[x].children;
}

});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html ng-app="App">

<head>
    <meta charset="utf-8" />
    <script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
</head>

<body>
    <div ng-controller="AppCtrl">
        <ul>
            <li><a ng-click="updateList(0)">First kids</a>
            </li>
            <li ng-click="updateList(1)"><a ng-click="updateList(1)">Second group of kids</a>
            </li>
            <li ng-click="updateList(2)"><a ng-click="updateList(2)">Third group of kids</a>
            </li>
        </ul>
        <ul>
            <li ng-repeat="children in childrens">
                {{children.childName}}
            </li>
        </ul>
    </div>
</body>

</html>

使用 ng-repeat 和从导航传递的索引值更新数据集中子项的列表

Update list of child items in data set using ng-repeat and index value passed from navigation

angularjs

angularjs-ng-repeat