CODEWITHSUNDEEP
javascriptangularjs
Raihan
Raihan

Reputation: 4011

Angularjs: Add placeholder on input with active class

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

Upvotes: 2

Views: 6013

Answers (2)

joshvito
joshvito

Reputation: 1563

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

Upvotes: 0

eladcon
eladcon

Reputation: 5825

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.

Upvotes: 7

Related Questions