Question

我正在尝试显示名称列表，当点击名称时，它将显示该名称的国家/地区，当点击其他名称时，它将隐藏前一个名称并仅显示单击的名称，我使用ng-show和控制器中声明的变量，但它只是继续显示我点击它的每个项目而不隐藏其他项目，这是我的代码：

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<div ng-repeat="x in records">
  <a href="#" ng-click="showDesc = true">{{x.Name}}</a>
  <div ng-show="showDesc">{{x.Country}}</div>
</div>
</div>
<script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
    $scope.showDesc = false;
      $scope.records = [
        {
          "Name" : "Alfreds Futterkiste",
          "Country" : "Germany"
        },
        {
          "Name" : "Berglunds snabbköp",
          "Country" : "Sweden"
        },
        {
          "Name" : "Centro comercial Moctezuma",
          "Country" : "Mexico"
        },
        {
          "Name" : "Ernst Handel",
          "Country" : "Austria"
        }
      ]
    });
</script>
</body>
</html>

Answer 1

ng-repeat有自己的范围。因此showDesc = true初始化ng-repeat范围中的showDesc字段。每个项目都有自己的showDesc。

您需要一个全局标志，对所有项目都是通用的。这不仅仅是一面旗帜：你需要知道必须扩展哪个项目。

所以只需将代码更改为

即可

$scope.expandedRecord = null;
$scope.expand = function(record) {
  $scope.expandedRecord = record;
}

和

<div ng-repeat="x in records">
  <a href="#" ng-click="expand(x)">{{x.Name}}</a>
  <div ng-show="expandedRecord === x">{{x.Country}}</div>
</div>

显示元素并隐藏ng-repeat中的其他元素

1 个答案: