在选择新div时从上一个div中删除活动类

时间:2017-05-04 12:24:03

标签: javascript angularjs

我在选择div时将div设置为div,但现在我想在选择新div时删除以前的活动类。

但是在这里我没有得到如何从之前选择的div中删除活动类。

生成树结构的代码源:http://jsfiddle.net/brendanowen/uXbn6/8/

模板:

<table ng-repeat="data in tree track by $index">
    <tbody>
        <div ng-click="setDivActive(data)" ng-class="{'active': data.selected}"></div>  //This div will be selected
     </tbody>
  </table>

<script type="text/ng-template"  id="tree_item_renderer.html">
 <button ng-click="add(data)">Add node</button>
 <table ng-repeat="data in data.nodes" id="tree_item_renderer.html">
    <tbody>
        <div ng-click="setDivActive(data)" ng-class="{'active': data.selected}"></div>  //This div will be selected
    </tbody>
 </table>
</script>

控制器:

 $scope.tree = [{name: "Node", nodes: [],selected:false}];
 $scope.addNode = function (data) {
        var post = data.nodes.length + 1;
        var newName = data.name + '-' + post;
        data.nodes.push({ name: newName, nodes: [],selected:false });
    };

$scope.setDivActive= function (data) {
        data.selected = true;
    };

1 个答案:

答案 0 :(得分:1)

在将新项目设置为所选项目之前,请迭代整个集合并将所有项目设置为“未选中”:

function clearSelected(items) {
    items.forEach(function(item) {
        item.selected = false;
        if (item.nodes) {
            clearSelected(item.nodes);
        }
    });
}

$scope.setDivActive= function (data) {
    clearSelected($scope.tree);
    data.selected = true;
};