Angularjs: Add placeholder on input with active class - javascript

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.

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

Related

Bind input to only one text input in angular

There is a scenario where I use ngfor and adding the text box for each iteration. When I type anything in the text box it binds to every text box but I want to give input to that text box only which I click to enter a value.
<div class="comment" *ngFor="let comment of blog.comments">
<p>posts...</p>
<input type="text" [(ngModel)]="newComment.content" [ngModelOptions]="{standalone: true}">
</div>
You are referring same ngModel to every text box.
You need to have a array of newComment Objects.
<div class="comment" *ngFor="let comment of blog.comments;let i = index">
<p>posts...</p>
<input type="text" [(ngModel)]="newComment[i].content" [ngModelOptions]="{standalone: true}">
</div>
This should be like this: event -> target-> value will give you current input value
Html:
<input (keyup)="onKey($event)">
Component TS
onKey(event: any) {
console.log(event.target.value)
}

How to restrict ngModel changes effect to other inside ng-template in angular7?

This is my code
<ng-template #rowDetailsTmpl let-row="row">
<div class="row" style="padding: 10px 30px;">
<div class="col-sm-5 form-group">
<label> Add Operator </label>
<input type="string" id={{row.DeskId}} name={{row.DeskId}} (ngModelChange)="onChangeOperator($event)" class="form-control"
placeholder="Search Operator" [(ngModel)]="selectedOperatorEmail">
</div>
#ViewChild('rowDetailsTmpl', { static: true }) rowDetailsTmpl: TemplateRef<any>;
this._dataTableService.rowDetailsTemplate = this.rowDetailsTmpl;
In my code input text field using inside ng-template , i set id and name dynamically , but when i change value in textbox it automatically reflect to other input fields. so how to solve this problem in angular7.
in component define the model like array:
selectedOperatorEmail: Array<any> = [];
in html define ngModel define like this:
[(ngModel)]="selectedOperatorEmail[row.DeskId]"

ngIf an angular reactive form component value

I have a set of radio buttons. If a user selected the value "yes" I want to show an additional box on the form.
https://stackblitz.com/edit/angular-4bgahw?file=src/app/personal/personal.component.ts
HTML.component
<div formGroupName="radioButtonsGroup" class="form-group col-6 pl-0 pt-3">
<div class="form-check-inline" *ngFor="let item of personal.radioButtonsdata">
<label for="{{item.section}}" class="col-12 customradio"
><span>{{item.section}}</span>
<input [value]="item" id="{{item.section}}" type="radio" formControlName="selectedButton"/>
<span class="checkmark"></span>
</label>
</div>
<!-- <div class="col-md-8" *ngIf="selectedButton.control.item === 'yes'"> --> //my attempt to target above input value
<div class="col-md-8" >
<input type="text" formControlName="title" class="form-control" placeholder="Title">
</div>
</div>
Can anybody get this to work and show me what I am doing wrong here please?
You need to access the value of the form control:
*ngIf="form.get('radioButtonsGroup.selectedButton').value.section === 'yes'">
STACKBLITZ
Everything you write in the template is resolved against the corresponding class (or against template variables), so you have to refer to the JavaScript control like this:
*ngIf="form.controls['selectedButton'].value === 'yes'"
Call a function to set flag based on value of the radio button, (ngModelChange)="onRadiochange($event)"
Try like this:
Working Demo
.html
<input [value]="item" (ngModelChange)="onRadiochange($event)" id="{{item.section}}" type="radio" formControlName="selectedButton" />
<div class="col-md-8" *ngIf="showTitle">
<input type="text" formControlName="title" class="form-control" placeholder="Title">
</div>
.ts
onRadiochange(e) {
if(e.section == 'yes'){
this.showTitle = true
} else {
this.showTitle = false
}
}
It can also be done in one line like this:
<input [value]="item" (ngModelChange)="$event.section == 'yes' ? showTitle=true:showTitle=false" id="{{item.section}}" type="radio" formControlName="selectedButton" />
Whenever yes checkbox is selected, you have to display the title textbox.
In that case, change your code like this.
In personal.component.ts, add this variable.
yesSelected: boolean = true;
Also in ngOnInit(),
this.form.valueChanges.subscribe(val=>{
if(val.radioButtonsGroup.selectedButton.section === "yes")
this.yesSelected = true;
else
this.yesSelected = false;
});
In personal.component.html, rewrite your if condition like this.
<div class="col-md-8" *ngIf="yesSelected">
<input type="text" formControlName="title" placeholder="Title">
</div>
These changes will show the title textbox only when the yes check box is selected.

Check multiple checkbox of nested ng-repeat in angularjs

I have $scope.getmaindata list with 5 objects, in each object i have a list contain multiple values which user achieved. And $scope.myproviders contain levels with id and level name. I want to check the multiple values of each user corresponded to that service when id matches. and if user have level 3 in his list i have to show the input box next to it. I tried some answers in stackoverflow but none of them solved my issue.The problem i am getting with code is when the levelsqualified list of the each user is not in the order, so i thought i have to write a for loop and wrote but not succeeded.
Here is the working plunkr with more code Plunkr v1
Update
The values are binding for the first time with $scope variables but when i uncheck some of them levelsqualified list of each user is not updated
Plunkr v2
<div class="col-md-12 col-sm-12" ng-repeat="mydata in getmaindata">
<ul class="list-inline">
<h4>{{mydata.firstname}}</h4>
<li ng-repeat="providers in myproviders">
<span>
<label class="checkbox-inline">
<input type="checkbox" id="providercheck{{$index}}" name="amlcprovidercheck{{$index}}" ng-model="mydata.checkedList"
ng-checked="mydata.levelsqualified[$index]==providers.level">
{{providers.level}}
</label>
</span>
</li>
<li>
<div class="required-field-block">
<input type="text" class="form-control" placeholder="show if user have third level is checked" ng-model="maindata.other_provider" />
</div>
</li>
</ul>
</div>
Extending on #Randi Radcliff's plunker, this plunker might do the trick.
On the ng-checked just did:
ng-checked="mydata.levelsqualified.indexOf(providers.id) > -1"
I believe you need to change your ng-checked (if I am understanding you correctly).
<label class="checkbox-inline">
<input type="checkbox" id="providercheck{{$index}}" name="amlcprovidercheck{{$index}}" ng-model="mydata.checkedList"
ng-checked="mydata.levelsqualified[$index]">
{{providers.level}}
</label>
and you need to add an ng-if for your input box like so:
<li ng-if="mydata.levelsqualified[$index]==3">
<div class="required-field-block">
<input type="text" class="form-control" placeholder="show if third level is checked" ng-model="maindata.other_provider" />
</div>
</li>
I hope this is what you needed.
EDIT
I changed the Plunker to incorporate both answers and a little hacking. I added an ng-change event and changed your ng-model. See Below:
<li ng-repeat="providers in myproviders">
<span>
<label class="checkbox-inline">
<input type="checkbox" name="amlcprovidercheck{{$index}}" ng-model="mydata.selected" ng-change="addCheckChoice(mydata, providers)" ng-checked="mydata.levelsqualified.indexOf(providers.id) > -1">
{{providers.level}}
</label>
</span>
</li>
<li ng-if="mydata.levelsqualified.indexOf(3) > -1">
<div class="required-field-block">
<input type="text" class="form-control" placeholder="show if third level is checked" ng-model="maindata.other_provider" />
</div>
</li>
I also added the following function:
$scope.addCheckChoice = function (c, p) {
var main = $scope.getmaindata.indexOf(c);
var idx = c.levelsqualified.indexOf(p.id);
if (c.selected === true) {
c.levelsqualified.push(p.id);
alert("You selected " + p.id + " for " + c.firstname);
}
else {
c.levelsqualified.splice(idx, 1);
alert("You removed " + p.id + " for " + c.firstname)
}
for (var i = 0; i < c.levelsqualified.length; i++) {
for(var x = 0; x < $scope.myproviders.length; x++){
if (c.levelsqualified[i] == $scope.myproviders[x].id) {
c.selected = true;
}
}
}
}
If this isn't what you need, let me know. You may need to do a little tweaking.

is there any way to bind ng-model to multiple input fields uniquely inside a directive?

In my Project i Got a Issue like.I need to bind the user hobbies in the text field.if the user comes with a single hobby he can directly enter the hobby that he has. but when he had multiple then he had to click add multiple hobbies button.that working fine when i am displaying input fields dynamically using directives.but the issue is the value that coming from ng-model for that input field is binding to all input fields.
Here is my code.
Thanks in advance!
these are the images
this is how i am getting
this is what i need
In HTML
<div>
<div id="showHobbyfield"></div>
<input type="number" class="form-control" placeholder="ADD HOBBIES"
ng-click="addHoby()">
</div>
In controller
$scope.addHoby= function(){
var compiledeHTML = $compile("<div my-hobby></div>")($scope);
$("#showHobbyfield").append(compiledeHTML);
};
$scope.addUser = function(){
$scope.Users= [];
var obj = {
userhobby : $scope.user.morehobies
};
$scope.Users.push(obj);
menuStorage.put($scope.Users);
//menustorage is service to store user in localStorage.
In directive
'use strict';
angular.module('myApp')
.directive('myHobby', function() {
return {
scope : false,
templateUrl: 'views/my-hobby.html'
};
});
this is template: my-hobby.html
<div class="input-group">
<input type="text" ng-model="user.morehobies" class="form-control" placeceholder="type your hobbies here">
<div class="close-icon">
<span class="glyphicon glyphicon-remove" style="padding-left: 6px;"> </span>
</div>
</div>
For this i would suggest some other way if its ok with you.
If your hobbies is coming in array, like
user.morehobies = ['Reading', 'Writing']
or create array for storing hobbies.
then inside directive you can pass that object in directive.
I will use ng-repeat inside directive.
<div class="input-group" ng-repeat="h in hobies">
<input type="text" ng-model="h" class="form-control" placeceholder="type your hobbies here">
<div class="close-icon">
<span class="glyphicon glyphicon-remove" style="padding-left: 6px;"> </span>
</div>
</div>
so whenever user clicks on "Add hobbies" then we can add empty string in hobbies object in directive.
and whenever user clicks on remove you can remove that item from array.

Categories