使用 ng-model 将 class 添加到所有以前的孩子 Angular JS

Question

这是我的 html 代码：

  <div ng-repeat="(key, a) in items" data-id="{{ Id }}" class="item" id="{{Key}}" ng-click="item($event, key)">
            <div class="bubble></div>
            <p>
                <span> {{ description }}</span>
            </p>
  </div>

这是项目列表。当我们单击列表中的项目时 - 所有先前的元素都设置为活动的（添加 class）。这是如何完成的：

  $scope.item = function(event, key) {
    var current;
    if ( $(event.target).hasClass('bubble')){
        current =   $(event.target).closest('#'+ Key);
        changeItem(current);
    }
    function changeItem(current){
        $(current).addClass('active');
        $(current).prevAll().addClass('active');
        $(current).nextAll().removeClass('active');
    }
};

是否可以使用 ng-model 或其他方式设置 json 文件中默认的活动值？意思是，在 json 中 - 我们有第 3 项 - 标记为活动，那么我如何将此值添加到 $scope.item 作为当前值？或者可能使用 ng-model?

Answer 1

我还没有尝试过，但是像这样的事情应该 work.Assuming 必须将 class 应用于 ng-repeat div。将您的 ng-repeat div 更改为：

 <div ng-repeat="(key, a) in items" data-id="{{ Id }}" class="item" id="{{Key}}" ng-click="markSelected($index)" ng-class="{'active':selectedIndex<$index}">
  </div>

ng-click 在控制器上调用一个方法 markSelected($index) 来设置当前选定的项目索引。 ng-class 使用当前索引 ($index) 和 selectedIndex 来确定要应用的 class。

最后的任务是实现如下所示的功能：

$scope.markSelected=function(index) {
   $scope.selectedIndex=index;
}

Answer 2

你应该停止使用 jquery 并开始以更 angular 的方式思考。

有一个指令ng-class用于添加或删除类

您可以在此处找到更多信息：https://docs.angularjs.org/api/ng/directive/ngClass

<div ng-repeat="(key, a) in items" data-id="{{ Id }}" class="item" id="{{Key}}" ng-click="item(key)">
        <div ng-class="{active : a.active, inactive : a.inactive}"></div>
        <p>
            <span> {{ description }}</span>
        </p>
</div>

$scope.item = function(key){
    $scope.items[key].active = true;
    $scope.items[key].inactive = false;
}

使用 ng-model 将 class 添加到所有以前的孩子 Angular JS

Use ng-model to add class to all previous childrens Angular JS

variables

json

angularjs

angularjs-scope