Question

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

这就是我所拥有的：

<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>

我想做的是。如果我专注于第一个输入第二输入＆amp;应该使用活动类启用按钮。如果我专注于第二输入第三输入＆amp;按钮将启用活动课程，然后继续......

因为我很有角度，所以我正在努力实现这一目标。任何帮助将受到高度赞赏。

Answer 1

为了做到这一点，您应该根据您的模型编写条件，而不是基于$ 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>

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

1 个答案: