1

そのため、アイテムのテーブルがあり、行をクリックすると行が選択されます。ここにデモをアップロードしました: http://plnkr.co/edit/m0TgTAQqITDIibMz7C4w?p=preview

問題は、アイテムを一度に 1 つずつ選択できるようにするにはどうすればよいかということです。また、コントローラー領域の外に配置する必要があるため、アイテムが選択されたときにのみ表示する方法について、編集および削除メニューにも問題があります。

<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>
4

1 に答える 1

2

複数の選択に関する最初の質問については、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;
  };
}

Edit/Remove メニューを Service に移動することをお勧めします。そうすれば、任意のコントローラーからグローバルにアクセスして動作を変更できます。例：

<!-- 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

于 2013-10-24T21:40:54.027 に答える