Question

如何使用我用来选择的相同按钮取消选择我刚刚选择的行，并突出显示ng-repeat列表中的行？有什么不同的选择，有没有任何例子或链接，因为我找不到任何？

编辑： - 请使用链接查看Plunker https://plnkr.co/edit/LYrmpLUwGaWx8wLeCOoT

代码在这里： -

HTML

<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x"    src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
<div ng-repeat="item in items" ng-class="{sel: item.Item == selected}">
  <label>Item No. {{item.Item}}</lablel> |
  <label>{{item.Description}}</label> |
  <button ng-click="onClick(item.Item);" class="btn btn-primary">
    {{item.Item == selected ? 'Hide' : 'Show'}}
  </button>
  </div>
  <br />
  <br />
  <div ng-switch="moduleState">
            <div ng-switch-when="details">
              These are your details:-
              Item {{selected}} is selected
              </div>
</body>
</html>

app.js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
$scope.items = [
    {
        Item: 1,
        Description: 'This is item 1'
    },
    {
        Item: 2,
        Description: 'This is item 2'
    },
    {
        Item: 3,
        Description: 'This is item 3'
    }
];

$scope.onClick = function (item) {
  $scope.selected = item;
  $scope.moduleState = 'details';
 };
});

选择其中一个按钮后，如何再次取消选择？

Answer 1

$scope.onClick = function(item) {
  if ($scope.selected === item) {
    $scope.selected = null;
  }
  else {
    $scope.selected = item;
  }
};

在视图中：

<div ng-repeat="item in items" ng-class="{sel: item.Item == selected}">
  <label>Item No. {{item.Item}}</lablel> |
  <label>{{item.Description}}</label> |
  <button ng-click="onClick(item.Item);" class="btn btn-primary">
    {{item.Item == selected ? 'Hide' : 'Show'}}
  </button>
</div>

<br />
<br />

<div ng-if="selected">
  These are your details:-
  Item {{ selected }} is selected
</div>

Answer 2

检查下面的插件：

https://plnkr.co/edit/u7I9nIRZgOMB7vqBr92n?p=preview

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.items = [
        {
            Item: 1,
            isVisible: false,
            Description: 'This is item 1'
        },
        {
            Item: 2,
            isVisible: false,
            Description: 'This is item 2'
        },
        {
            Item: 3,
            isVisible: false,
            Description: 'This is item 3'
        }
    ];
    
    $scope.onClick = function (item) {
      if(!item.isVisible) {
        item.isVisible = !item.isVisible;
        $scope.selected = item.Item;
        $scope.moduleState = 'details';
      } else {
        item.isVisible = !item.isVisible;
        $scope.selected = $scope.moduleState = "";
      }
    };
});

<button ng-click="onClick(item);" class="btn btn-primary">
        {{item.Item == selected ? 'Hide' : 'Show'}}
      </button>

基本上我所做的是：

为每行添加了标记“isVisible”
当设置为可见
，如果可见，则隐藏它。

取消选择ng-repeat中的选定行

2 个答案: