Question

所以我有一个项目表，当我点击一行时，行被选中。我在这里上传了一个演示：http://plnkr.co/edit/m0TgTAQqITDIibMz7C4w?p=preview

问题是如何让我能够一次选择一个项目并取消选择上一个活动项目？编辑和删除菜单也存在问题，如何在选择项目时仅显示它，因为它们必须放在控制器区域之外。

<nav class="navbar navbar-default" role="navigation">
  <ul ng-show="true" class="nav navbar-nav">
    <li><a href="#">Remove</a></li>
    <li><a href="#">Edit</a></li>
  </ul>
</nav>
<table ng-controller="PersonController" class="table">
 <tr>
   <th>Name</th>
   <th>Age</th>
 </tr>
  <tr ng-repeat="person in people" ng-click="selectPerson(person)" ng-class="{active: person.selected }">
    <td>{{ person.name }}</td>
    <td>{{ person.age }}</td>
  </tr>
</table>

<script>
function PersonController($scope) {
  $scope.people = [
    { name: 'adam', age: 240 },
    { name: 'steve', age: 30 }
  ];

  $scope.selectPerson = function(person) {
    person.selected = true;
  };
}
</script>

Answer 1

关于有关多个选择的第一个问题，您可以在调用selectPerson时缓存范围中的最后一个选定项，然后在下次调用selectPerson时通过说lastPerson.selected = false取消选择它。例如：

function PersonController($scope) {
  $scope.people = [
    { name: 'adam', age: 240 },
    { name: 'steve', age: 30 }
  ];

  $scope.lastPerson = null;
  $scope.selectPerson = function(person) {
    person.selected = true;
    if($scope.lastPerson) {
      $scope.lastPerson.selected = false;
    }
    $scope.lastPerson = null;
    $scope.lastPerson = person;
  };
}

我建议将编辑/删除菜单移动到服务中，然后您可以从任何控制器和全局访问它。改变它的行为。例如：

<!-- HTML -->
<div ng-controller="MenuCtrl" class="menu-parent">
  <div ng-show="!isCollapsed" class="menu-container">
    <!-- menu goes here -->
  </div>
</div>

// controller
function MenuCtrl($scope, menuService) {
    $scope.isCollapsed = true;

    $scope.menuService = menuService;
    $scope.$watch('menuService.menuCollapsed', function(newVal, oldVal, scope) {
        $scope.isCollapsed = menuService.menuCollapsed;
    });
}

// service
angular.service('menuService', function () {
    return {
      menuCollapsed: false
    };
  });

// example usage in any controller
function RandomCtrl($scope, menuService) {
  $scope.randomEvent = function() {
    menuService.menuCollapsed = true;
  }
}

如果您愿意，我很乐意帮助您住在这里：https://www.sudonow.com/session/52699424ea4032693f000071

单一选择桌面上的项目

1 个答案: