Question

我有一个列表，例如

var items = [1, 2, 3];
var list = [
  {
    id: 1,
    name: 'name 1'
  },
  {
    id: 2,
    name: 'name 3'
  },
  {
    id: 3,
    name: 'name 2'
  }
]

我使用li标签（不是选项）来显示此列表。

<div ng-repeat="item in items">
  <ul>
    <li ng-repeat="name in listName">
      <a ng-click="">{{name.name}}</a>
    </li>
  </ul>
</div>

项目中将显示3项和3列表相同。当我点击第1项的名称1时，帮助我，隐藏项目2,3的名称1，...项目2中的点击名称2将隐藏项目1,3的名称2 ... 感谢

Answer 1

以下是如何做到这一点

angular.module("myApp", []).controller("myCtrl", function($scope) {
  $scope.items = [1, 2, 3];
  $scope.list = [{
    id: 1,
    name: 'name 1'
  }, {
    id: 2,
    name: 'name 3'
  }, {
    id: 3,
    name: 'name 2'
  }];
  $scope.hideOthers = function(item, name){
    $scope.selectedItem = item;
    $scope.selectedName = name;
  };
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myApp">

<body>
  <div ng-controller="myCtrl">
    <div ng-repeat="item in items">
      <ul>
        <li ng-repeat="name in list">
          <a ng-click="hideOthers(item, name.name)" ng-show="!selectedItem || name.name !== selectedName || item === selectedItem">{{name.name}}</a>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

Answer 2

1）你只需要使用变量items来设置循环计数。它可以在ng-repeat;中生成 2）变量名称有错误 - list，而不是listName;

<div ng-repeat="i in [1, 2, 3]">
  <ul>
    <li ng-repeat="name in list">
      <a ng-click="name.select = i" ng-if="!name.select || name.select === i">{{name.name}}</a>
      <strike ng-if="name.select && name.select !== i">{{name.name}}</strike>
    </li>
  </ul>
</div>

<强>更新
3）同时使用$scope.list = //data广播数据到模板;

隐藏在ng-repeat中选择的项目

2 个答案: