Question

我有一个角度js应用程序，我想切换一个＆＃34;活跃的＆＃34;单击容器中的类并从其他容器中删除活动类，即只有一个容器应同时处于活动状态。目前，我想出了以下代码，可以同时切换所有容器中的活动类。是否有任何方法可以指定已点击容器的ID，还是有其他解决方法？

...
server {
    charset utf-8;
    client_max_body_size 128M;

    #listen       80 default_server;
    listen       443 ssl;
    server_name  domain.com;
    root         /usr/share/nginx/html/dahz/web;
    index        index.php index.html index.htm;

    ssl_certificate      /etc/ssl/bundle.crt;
    ssl_certificate_key  /etc/ssl/domain.key;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;

    #charset koi8-r;

    #access_log  /var/log/nginx/host.access.log  main;

    # Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;

    location / {
            autoindex  on;
            try_files $uri $uri/ /index.php?$args;

            proxy_pass http://localhost:8080;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";

     }
...

Answer 1

您可以使用index：

HTML：

<div ng-controller="sampleController">
    <div ng-class="{ active: (activeIndex == 1)}" ng-click="toggleActive(1)">aaa</div>
    <div ng-class="{ active: (activeIndex == 2)}" ng-click="toggleActive(2)">bbb</div>
    <div ng-class="{ active: (activeIndex == 3)}" ng-click="toggleActive(3)">ccc</div>
</div>

使用Javascript：在控制器

$scope.isActive = false;
$scope.toggleActive = function (index) {
    $scope.isActive = !$scope.isActive;

    $scope.activeIndex = $scope.isActive ? index : -1;
};

演示：http://jsfiddle.net/tusharj/z7urh4vf/

Answer 2

好的，我想出了Grundy建议的以下解决方案。

<div ng-controller="sampleController">
    <div ng-class="{ active: (activeIndex == 1)}" ng-click="toggleActive(1)">aaa</div>
    <div ng-class="{ active: (activeIndex == 2)}" ng-click="toggleActive(2)">bbb</div>
    <div ng-class="{ active: (activeIndex == 3)}" ng-click="toggleActive(3)">ccc</div>
</div>

$scope.activeIndex = -1;
$scope.toggleActive = function(index) {
    $scope.activeIndex = index;
}

Answer 3

您可以通过几种方式完成此操作

＆＃13;

angular.module('app', [])
  .controller('c1', function($scope) {
    $scope.isActive = [false, false, false];
    $scope.toggleActive = function(index) {
      for (var i = 0, len = $scope.isActive.length; i < len; i++) {
        if (i == index) $scope.isActive[i] = !$scope.isActive[i]
        else $scope.isActive[i] = false
      }
    }
  })
  .controller('c2', function($scope) {
    $scope.activeIndex = -1;
    $scope.toggleActive = function(index) {
      $scope.activeIndex = $scope.activeIndex == index ? -1 : index;
    }
  })
  .controller('c3', function($scope) {
    $scope.items = [123, 456, 789];
    $scope.active == null;
    $scope.toggleActive = function(item) {
      $scope.active = $scope.active == item ? null : item;
    }
  });

＆＃13;

.active {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">

  <div ng-controller="c1">
    First:
    <div ng-class="{ active: isActive[0]}" ng-click="toggleActive(0)">123</div>
    <div ng-class="{ active: isActive[1]}" ng-click="toggleActive(1)">456</div>
    <div ng-class="{ active: isActive[2]}" ng-click="toggleActive(2)">789</div>
  </div>

  <div ng-controller="c2">
    Second:
    <div ng-class="{ active: activeIndex==1}" ng-click="toggleActive(1)">123</div>
    <div ng-class="{ active: activeIndex==2}" ng-click="toggleActive(2)">456</div>
    <div ng-class="{ active: activeIndex==3}" ng-click="toggleActive(3)">789</div>
  </div>
  <div ng-controller="c3">
    With ng-repeat:
    <div ng-class="{ active: active == item}" ng-repeat="item in items" ng-click="toggleActive(item)">{{item}}</div>
  </div>
</div>

＆＃13;

如何使用Angular JS同时激活一个容器

3 个答案: