I have a list of inputs created via ng-repeat. Initially all inputs are disabled except the first one. First input also have an active class (it's red in color because of active class) Planker

When I focus on the first input field 2nd input field bees enabled with same active class. Same for others

So what I am trying to do is, if inputs have active class there will be a "placeholder text" on it. Without active class there should be no placeholder.

How I can add a placeholder dynamically on the input with active class ?

Code:

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

Thanks in advance.

I have a list of inputs created via ng-repeat. Initially all inputs are disabled except the first one. First input also have an active class (it's red in color because of active class) Planker

When I focus on the first input field 2nd input field bees enabled with same active class. Same for others

So what I am trying to do is, if inputs have active class there will be a "placeholder text" on it. Without active class there should be no placeholder.

How I can add a placeholder dynamically on the input with active class ?

Code:

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

Thanks in advance.

• javascript
• angularjs

Share Improve this question Follow asked Apr 10, 2015 at 17:18 RaihanRaihan 4,03133 gold badges2525 silver badges4141 bronze badges 1

• you can create a directive, here is an example – joshvito Commented Apr 10, 2015 at 17:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You could set a placeholder on the input conditionaly, and If its true set to some value from the scope for example:

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

See this plunker.

You can add a function to the $scope and check for the active = true on your data model.

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

I forked your Plink