Question

我有一个通过ng-repeat创建的输入列表。最初除了第一个输入外，所有输入都被禁用。第一个输入也有一个活动类（由于活动类，它的颜色为红色） Planker

当我专注于第一个输入字段时，第二个输入字段变为启用相同的活动类。其他人也一样

所以我要做的是，如果输入有活动类，则会有一个“占位符文本”。如果没有活动类，则应该没有占位符。

如何在具有活动类的输入上动态添加占位符？

代码：

<div class="col-md-2-4 voffset3" ng-repeat="item in csTagGrp">
  <ul class="list-unstyled cs-tag-item-grp" ng-init="$parentIndex = $index">
     <li class="clearfix" ng-repeat="value in item.csTags">
        <div class="pull-left cs-tag-item-list">
           <input ng-focus="focusItem($index, $parentIndex)"  ng-disabled="!value.active" ng-class='{active: value.active && !value.old}' type="text" class="form-control input-sm">
        </div>
       </li>
   </ul>
</div>

提前致谢。

Answer 1

您可以在输入条件上设置占位符，如果将其设置为范围内的某个值，例如：

<input placeholder="{{value.active && !value.old ? placeholder : ''}}" ng-focus="focusItem($index, $parentIndex)"  ng-disabled="!value.active" ng-class='{active: value.active && !value.old}' type="text" class="form-control input-sm">

// controller
$scope.placeholder = "something";

请参阅此plunker。

Answer 2

您可以向$ scope添加一个函数，并检查数据模型上的active = true。

//controller
    $scope.getPlaceholder = function (item) {
     if(item.active){
       return item.tags;
     }
   }

//view
<input ng-focus="focusItem($index, $parentIndex)" 
           placeholder="{{getPlaceholder(value)}}"
           ng-disabled="!value.active" 
           ng-class='{active: value.active && !value.old}' 
           type="text" class="form-control input-sm">

我分叉了你的Plink

Angularjs：在带有活动类的输入上添加占位符

2 个答案: