Question

In jQuery, sometimes we need to toggle a group of elements to inactive and the clicked element to active. for example:

Sample Markup:

<ul>
    <li class="foo-item active">item 1</li>
    <li class="foo-item">item 1</li>
    <li class="foo-item">item 1</li>
    <li class="foo-item">item 1</li>
</ul>

Sample Code:

$(".foo-item").click(function(){
    $(".foo-item").removeClass("active");
    $(this).addClass("active");
});

code above will take out the "active" class from all ".foo-item" and then put "active" just on clicked item. This is useful for many kind of ui elements as tabs for example.

How to do it using Angular.js?

we have ng-class on the clicked item, but how can I take out the active from another non clicked elements?

Answer 1

您的控制器中可能有一个数组items，其中每个元素都有property个。{/ p>

<强>标记

<ul>
    <li class="foo-item" ng-class="{active: item.id == $parent.selected }" 
      ng-repeat="item in items" ng-click="$parent.selected = item.id">{{item.text}}
    </li>
</ul>

<强>控制器

$scope.items = [
     {id: 1, text: 'Item 1'},
     {id: 2, text: 'Item 2'},
     {id: 3, text: 'Item 3'},
     {id: 4, text: 'Item 4'}
];

Angular.js set tab active and another tabs inactive

1 个答案: