angularjs移除焦点上的活动类并添加到下一个项目

angularjs remove active class on focus and add to next item

本文关键字：添加 下一个 项目 活动 焦点 angularjs      更新时间：2023-09-26

我用ng repeat创建了按钮和输入字段的列表，其中除第一个按钮和输入外，所有按钮和输入都被禁用。第一个输入和按钮也包含活动类。活动类以红色显示项目。当我专注于第一个输入项时，删除了活动类。

Plunker

这是我所拥有的：

<div class="col-md-2-4 voffset3" ng-repeat="item in csTagGrp">
        <div class="cs-tag-grp-title">
           <input ng-focus="focused=true" disabled type="text" ng-disabled="!$first" ng-class='{active:$first && focused!=true}' class="form-control input-sm"placeholder="Start New Tag Group">
        </div>
        <ul class="list-unstyled cs-tag-item-grp">
           <li class="clearfix" ng-repeat="value in item.csTags">
              <div class="pull-left">
                 <button type="button" ng-disabled="!$parent.$first || !$first" ng-class='{active:$parent.$first && $first}' class="btn btn-default btn-xs">{{value.keys}}</button>
                 <span>=</span>
              </div>
              <div class="pull-left cs-tag-item-list">
                 <input  ng-focus="focused=true"  ng-disabled="!$parent.$first || !$first" ng-class='{active:$parent.$first && $first && focused!=true}' type="text" class="form-control input-sm">
              </div>
           </li>
        </ul>
    </div>

我想做的是，如果我专注于第一个输入第二个输入&按钮应该与活动类一起启用。并且如果我再次关注第二输入第三输入&按钮将与活动类一起启用，然后继续。。。

由于我是一个刚开始有棱角的人，我正在努力实现这一点。如有任何帮助，我们将不胜感激。

为了做到这一点，您应该基于模型而不是基于$first或$last编写条件。

这是更新的Plunker。希望这对你有用。

<div class="col-md-2-4 voffset3" ng-repeat="item in csTagGrp">
  <div class="cs-tag-grp-title">
     <input ng-focus="focusGroup($index)" type="text" ng-disabled="!item.active" ng-class='{active: item.active}' class="form-control input-sm"placeholder="Start New Tag Group">
  </div>
  <ul class="list-unstyled cs-tag-item-grp">
     <li class="clearfix" ng-repeat="value in item.csTags">
        <div class="pull-left">
           <button type="button" ng-disabled="!value.active" ng-class='{active: value.active}' class="btn btn-default btn-xs">{{value.keys}}</button>
           <span>=</span>
        </div>
        <div class="pull-left cs-tag-item-list">
           <input ng-focus="focusItem($index, item.csTags)"  ng-disabled="!value.active" ng-class='{active: value.active}' type="text" class="form-control input-sm">
        </div>
       </li>
   </ul>
</div>
相关文章：