0

次のコードがある場合、要素のアクティブなクラスを切り替えるにはどうすればよいですか?

<div class="searchandfilter">
    <span ng-repeat="taxonomy in taxonomies" class="tab-controller" ng-class="{'active': $index == 0}">
        <ul>
            <li class="tab" ng-click="onClickTab(taxonomy)">{{taxonomy.name}}</li>
        </ul>
        <span class="tab-content">
            <span ng-repeat="child in taxonomy.children">
                <input type="checkbox" checked="child.value" />{{child.name}}
            </span>
        </span>
    </span>

ロード時に、最初のタブ コントローラースパンをアクティブに設定する必要があります。これは正しいですが、オンクリックでアクティブなクラスを切り替えることはできません。タブの数は動的であるため、1 または 10 にすることができます。現在、次のようなタブが生成されます。

<span class="tab-controller ng-scope active" ng-class="{'active': $index == 0}" ng-repeat="taxonomy in taxonomies">
<ul>
<li class="tab ng-binding" ng-click="onClickTab(taxonomy)">Tab 1</li>
</ul>
</span>

<span class="tab-controller ng-scope" ng-class="{'active': $index == 0}" ng-repeat="taxonomy in taxonomies">
<ul>
<li class="tab ng-binding" ng-click="onClickTab(taxonomy)">Tab2</li>
</ul>
</span>
4

3 に答える 3

1

これを行うには、インデックスを渡し、スコープ変数を設定します。

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

app.controller('myController', function($scope) {
  $scope.taxonomies = [
    {name: 'a', children: [{name: 'a', value: false}]}, 
    {name: 'b', children: [{name: 'a', value: true}, 
                           {name: 'b', value: false}]}
  ];
  
  $scope.onClickTab = function(idx) {
    $scope.selectedIndex = idx;
  };
  
  $scope.selectedIndex = 0;
});
.active {
  color: green;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app='app' ng-controller='myController'>

  <div class="searchandfilter">
    <span ng-repeat="taxonomy in taxonomies" class="tab-controller" ng-class="{'active': $index == selectedIndex}">
        <ul>
            <li class="tab" ng-click="onClickTab($index)">{{taxonomy.name}}</li>
        </ul>
        <span class="tab-content">
            <span ng-repeat="child in taxonomy.children">
                <input type="checkbox" ng-model="child.value">{{child.name}}
            </span>
    </span>
    </span>
  </div>
</div>

このアプローチの問題は、タクソノミーが変更された場合、selectedIndex が選択されたタブと一致しなくなる可能性があるため、インデックスを追跡する代わりに、オブジェクト全体を追跡できることです。

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

app.controller('myController', function($scope) {
  $scope.taxonomies = [
    {name: 'a', children: [{name: 'a', value: false}]}, 
    {name: 'b', children: [{name: 'a', value: true}, 
                           {name: 'b', value: false}]}
  ];
  
  $scope.onClickTab = function(selected) {
    $scope.selected = selected;
  };
  
  $scope.selected = $scope.taxonomies[0];
});
.active {
  color: green;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app='app' ng-controller='myController'>

  <div class="searchandfilter">
    <span ng-repeat="taxonomy in taxonomies" class="tab-controller" ng-class="{'active': taxonomy === selected}">
        <ul>
            <li class="tab" ng-click="onClickTab(taxonomy)">{{taxonomy.name}}</li>
        </ul>
        <span class="tab-content">
            <span ng-repeat="child in taxonomy.children">
                <input type="checkbox" ng-model="child.value">{{child.name}}
            </span>
    </span>
    </span>
  </div>
</div>

于 2015-05-20T12:33:47.650 に答える
1

ng-repeat の $index と比較できるようにするには、タブにいくつかのプロパティが必要です。

例えば：

<div class="tab-controller" ng-class="{'active': $index == currentTab}" ng-repeat="taxonomy in taxonomies">
    <ul>
        <li class="tab" ng-click="onClickTab(taxonomy.tab)">{{ taxonomy.name }}</li>
    </ul>
</div>

タクソノミーは、次のようなオブジェクトの配列である必要があります。

var taxonomies = [
    { id: 0, name: 'Tab 1', tab: 'whatever you need here'},
    { id: 1, name: 'Tab 2', tab: 'whatever you need here'},
    { id: 2, name: 'Tab 3', tab: 'whatever you need here'}
];

関数 onClickTab を呼び出すと、変数 scope.currentTab がクリックされたタブの ID に設定されます。

それが役に立てば幸い。

于 2015-05-20T12:15:29.273 に答える
0

間違っていたらすみません、これを試してください

http://plnkr.co/edit/FdueM4rAvd4k6hClK1HR?p=preview

あなたのhtmlは

<html>

<head>
  <script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="app">

  <div class="searchandfilter" ng-controller="tab-controller">

    <span ng-repeat="taxonomy in taxonomies">
        <ul  ng-class="{'active': $index == selectedIndex}">
            <li class="tab" ng-click="onClickTab(taxonomy.id)">{{taxonomy.name}}
              <br/>
                <span class="tab-content">
                  <span ng-repeat="child in taxonomy.children">
                      <input type="checkbox" ng-model="child.value" />{{child.name}} 
                  </span>
                </span>
            </li>
        </ul>
    </span>
  </div>

</body>
</html>

angular jsコードは

  var app = angular.module("app",[]);
    app.controller('tab-controller',['$scope',function($scope){

    $scope.taxonomies = [
    { id: 0, name: 'hello' , children:[{name:"test1",value:true},{name:"test2",value:false}]},
    { id: 1, name: 'how' , children:[{name:"test5", value: false}]},
    { id: 2, name: 'are you',children:[{name:"test4",value: true}]}
    ];

    $scope.onClickTab= function(x){
      $scope.selectedIndex= x;
    };

  }]);

cssコードは

.active{
  background-color:green;
}

body {
    background-color: yellow;
}
于 2015-05-20T12:56:55.823 に答える